CSS Flexbox: The Only Guide You Need

Stop Googling flexbox every time. Bookmark this page instead.

The Container

.container { display : flex ; }

Enter fullscreen mode

Exit fullscreen mode

That's it. Everything inside is now a flex item.

Direction: Row vs Column

/* Horizontal (default) */ .flex-row { flex-direction : row ; }

/* Vertical */ .flex-col { flex-direction : column ; }

Enter fullscreen mode

Exit fullscreen mode

Row (default): Column: ┌───┬───┬───┐ ┌───┐ │ 1 │ 2 │ 3 │ │ 1 │ └───┴───┴───┘ ├───┤ │ 2 │ ├───┤ │ 3 │ └───┘

Enter fullscreen mode

Exit fullscreen mode

Alignment (The Tricky Part)

Main Axis vs Cross Axis

Row layout: Main axis: → (horizontal) Cross axis: ↓ (vertical)

Column layout: Main axis: ↓ (vertical) Cross axis: → (horizontal)

Enter fullscreen mode

Exit fullscreen mode

justify-content (Main Axis)

.container { justify-content : flex-start ; /* Default: items at the start */ justify-content : flex-end ; /* Items at the end */ justify-content : center ; /* Items centered…