Flexbox: Align rows or columns

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

The first property we see, flex-direction, determines if the container should align its items as rows, or as columns:

flex-direction: row places items as a row, in the text direction (left-to-right for western countries)
flex-direction: row-reverse places items just like row but in the opposite direction
flex-direction: column places items in a column, ordering top to bottom
flex-direction: column-reverse places items in a column, just like column but in the opposite direction

Rows or columns

0:	Introduction
1:	▶︎ Align rows or columns
2:	Vertical and horizontal alignment
3:	Wrap
4:	Moving items before / after another one using order
5:	Vertical alignment using align-self
6:	Grow or shrink an item if necessary
7:	Create a layout using Flexbox
8:	How to have a flex child not fill entire height