Flex(box)

Code: (copy)

1.container {
2    display: flex;
3}

Flexbox, or the "flexible box" layout in CSS, is the greatest (CSS) invention since z-index. A flex container is easy to specify, and is useful in a huge range of CSS applications.

As always, while the examples on this page are touched-up a bit for visuals, you can always open inspect element and poke around or view this page's source code on GitHub.

Conceptually, a flex container aligns its children along a certain axis (horizontal, by default, or vertical). This is controlled by the flex-direction property.

Code: (copy)

1.container {
2    flex-direction: column;
3}

Flex direction can be set to row, to set the axis to horizontal (the default), or column, to set the axis to vertical. While less commonly used, there is also row-reverse and column-reverse, which function like row and column but with the order of elements reversed.

By default, a flex container will force its children to remain on its specified axis. If the children are too wide (or tall, for flex-col), they will overflow.

If you want overflowing elements to wrap around instead, use the flex-wrap property.

Code: (copy)

1.container {
2    flex-wrap: wrap;
3}

flex-wrap can be set to nowrap (the default), which forces elements onto a single row / column, or wrap to allow wrapping.

If you wanted to add even spacing between elements using margin, you'd have to be careful to specify :not(:first-child) so as to avoid accidentally adding left or top margin to the first element and shifting the entire container. Plus, for a wrapped flex container, calculating which elements should receive top margin is incredibly complex.

Instead, to add even spacing between elements in a flexbox, use the gap property. gap simplifies all the aforementioned logic into a single, concise statement:

Code: (copy)

1.container {
2    gap: 1rem;
3}

Indeed, gap is actually a shorthand for two properties, column-gap and row-gap. To specify different gap widths for the x and y axes, you can set these directly:

Code: (copy)

1.container {
2    column-gap: 1rem;
3    row-gap: 0.5rem;
4}

Wrapping is great, but how do we deal with the excess whitespace in the container?

To align elements along the perpendicular (cross) axis of the flex container, use the align-items property.

Code: (copy)

1.container {
2    align-items: center;
3}

To center items vertically when the flex direction is row, for example, use align-items: center:

align-items takes the following values:

There are some 10+ other values for align-items, but in 99% of cases the above 4 will suffice; the curious can read about them here. For some more examples,

To align elements along the parallel (main) axis of the flex container, use the justify-content property.

Code: (copy)

1.container {
2    justify-content: center;
3}

To center items horizontally when the flex direction is row, for example, use justify-content: center:

While it suffices to think of justify-content as aligning elements along the container's parallel axis, what justify-content actually controls is the distribution of whitespace within the container.

Then, justify-content takes the following values:

There are also a few more values for justify-content, but in 99% of cases the above will suffice; the curious can read about them here. For some more examples,

So now that you know flexbox, what can you do with it?

There's an oft-repeated joke about how centering a div proves to be a monumental task in CSS. But this joke is outdated; using flexbox, we can center a div in 3 lines of code:

Code: (copy)

1.container {
2    display: flex;
3    align-items: center;
4    justify-content: center;
5}

Indeed, flex is great for anything you need to display together in a row, like cards in a section,

Code: (copy)

1.wrapper {
2    display: flex;
3    gap: 2rem;
4    justify-content: center;
5}

elements in a navbar,

Code: (copy)

1.nav {
2    display: flex;
3    align-items: center;
4    justify-content: space-between;
5}
6
7.nav > .right {
8    display: flex;
9    gap: 1rem;
10}

any time you have stacked elements ever,

Code: (copy)

1.list {
2    display: flex;
3    flex-direction: column;
4    gap: 0.5rem;
5}