A Complete, Interactive Guide to CSS Flexbox

In the past, making HTML elements appear next to each other was a tricky proposition. It usually relied on floats, often resulting in some strange behaviors. Today, we have flexbox, which is widely accepted as the standard way to do this. Flexbox lets us align content in columns or rows, while automatically adjusting its size based on how we set it up. Below, you can view the complete guide to CSS flexbox, along with a generator to let you generate the layout style you want for your container elements.

CSS Flexbox Generator

Properties for Containers

For your reference, here are the individual properties and the effects they have on a flexbox configuration. For all of these examples, except flex-wrap itself, we use flex-wrap: wrap;.

justify-content

This justifies content along the flex-direction axis.

align-items

This aligns the content along the axis perpendicular to the flex-direction axis for a single row of items.

flex-direction

This sets the main axis of the flex, whether that is vertical (column) or horizontal (row).

align-content

This sets the position for all rows in a much larger box.

flex-wrap

This sets the position for all rows in a much larger box.

Properties for Items

Although you can affect entire collections of items with flexbox, you can also call out individual items and apply styles to them in particular. Below, the examples show you how to do that.

order

When applied to an item, it gives it an order relevant to other items around it. An order of 9999 will go to the end of the flow direction. Think of this like z-index, but for flexbox.

flex-grow

Dictates the alignment of a particular item along the perpendicular axis to the flow direction.

align-self

Dictates the alignment of a particular item along the perpendicular axis to the flow direction.

Conclusion

I hope you've enjoyed this guide on flexbox, and I hope it's been useful in fully explaining how flexbox works. If you want to see something similar for the CSS grid, see here.