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 */ justify-content :…