How to understand Flexbox in CSS

Start with the parent

The element with display flex controls the layout. It determines whether children line up horizontally or vertically, how they use extra space, and what happens when room is limited.

Before touching individual items, ask two questions: what is the main axis, and what should happen to extra space on that axis?

Main axis versus cross axis

justify-content works along the main axis. align-items works across it. When flex-direction is row, that usually means justify-content is horizontal and align-items is vertical. When flex-direction is column, those meanings flip.

That single detail explains a lot of confusion. The property did not stop working; the axis changed.

.toolbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

Control how items use space

A flex item starts with its content size and adjusts to the available room. flex-grow controls how much extra space it can take. flex-shrink controls how much it can reduce. flex-basis sets its initial size.

For interface work, flex: 1 is useful when siblings should share available space. flex: 0 0 auto is useful when a button, icon, or thumbnail should keep its natural size.

Watch for the min-width trap

Long text inside a flex child can refuse to shrink because its minimum content size is wider than the container. When a layout mysteriously overflows, min-width: 0 is often the missing piece.

This is especially important for cards, nav rows, and article lists where text sits beside fixed-size media.

Know when not to use it

Flexbox is strongest when the layout has one primary direction: a nav row, a stack, a media object, a toolbar, or a group of cards that wrap. If you need precise control over rows and columns at the same time, CSS Grid is usually the clearer tool.

Choose the layout model that fits the problem rather than using one approach everywhere.