What you will learn
- Turn a container into a flex container and set its direction
- Align and distribute items with justify-content and align-items
- Let items wrap and grow using flex-wrap and flex properties
Flexbox lays out items along one direction at a time. Setting display: flex on a container places its direct children in a row by default. Change this with flex-direction: column to stack them. The gap property adds even space between items without needing margins on each one. Flexbox suits components such as navigation bars, button groups and rows of cards.
Alignment works on two axes. The main axis follows the flex direction, and justify-content controls it, with values such as flex-start, center and space-between. The cross axis runs the other way, and align-items controls it. A common pattern is a header with display: flex, justify-content: space-between and align-items: center, which puts a logo on the left and a menu on the right.
By default, flex items squeeze onto one line. Adding flex-wrap: wrap lets them move onto new lines when space runs out. The flex property controls how items grow and shrink: flex: 1 makes items share the available space equally. Combining flex: 1 with a minimum width, such as flex-basis: 200px, gives a simple card row that wraps neatly on narrow screens.