How to Use CSS Flexbox for Layouts

CSS Flexbox lays out items in a single row or column and handles their alignment and spacing for you. You set display: flex on a container, and its direct children become flex items that you can align, distribute, and grow. It is the right tool for one-dimensional layouts like navbars, button groups, and card rows.

How CSS Flexbox works: container and items

Flexbox has two players. The flex container is the element you set display: flex on. Its direct children automatically become flex items. You control the overall layout from the container and fine-tune individual children with item properties.

Every flex container has two axes. The main axis runs in the direction items flow (a row goes left to right by default). The cross axis runs perpendicular to it. Almost every alignment property is defined against one of these two axes, so knowing which is which makes the rest click.

Container properties you will use most

Set these on the container:

display: flex turns the element into a flex container.
flex-direction sets the main axis: row (default) or column.
justify-content aligns items along the main axis. Use space-between, center, flex-start, and friends to distribute items horizontally in a row.
align-items aligns items along the cross axis. In a row, this controls vertical alignment, so center vertically centers your items.
flex-wrap: wrap lets items flow onto a new line instead of overflowing.
gap adds consistent spacing between items without margins.

The common mix-up: justify-content is the main axis and align-items is the cross axis. Flip flex-direction to column and their visual effects swap.

Item properties and the flex shorthand

Set these on individual items to control how they size:

flex-grow is how much an item grows to fill leftover space.
flex-shrink is how much it shrinks when space is tight.
flex-basis is its starting size before growing or shrinking.

The flex shorthand combines all three. flex: 1 means flex: 1 1 0, so every item grabs an equal share of the row. A common pattern is one fixed sidebar plus a flexible main area:

.container { display: flex; gap: 16px; }
.sidebar   { flex: 0 0 240px; }  /* fixed width, never grows or shrinks */
.main      { flex: 1; }          /* takes the remaining space */

Try it in the Flexbox Playground

The fastest way to learn the properties is to change them and watch the boxes move. Use the Flexbox Playground to do exactly that:

Open the Flexbox Playground and start with a few items in a row.
Switch flex-direction between row and column to see the axes swap.
Change justify-content to space items along the main axis.
Change align-items to align them on the cross axis.
Set one item to flex: 1 and watch it absorb the free space, then copy the generated CSS.

It runs entirely in your browser, so nothing you type is sent anywhere.

Flexbox vs Grid: when to use which

Reach for Flexbox when you are laying out items in one dimension, a single row or a single column, and you want them to align and space nicely. Reach for CSS Grid when you need two dimensions at once, rows and columns together, like a page layout or an image gallery. They also work together: a Grid for the page, Flexbox inside each cell.

CSS Grid Builder for two-dimensional row-and-column layouts.
Box Shadow Generator to add depth to your flex cards.
Border Radius Visualizer to round those same corners.

Remember main axis for justify-content, cross axis for align-items, and let flex: 1 do the spacing math for you.