A flex container controls the layout of its direct children. Set `display: flex` on an element, and those children become flex items. They appear in one row by default; the container fills the available width, but the items need not. This makes flexbox useful when a navigation menu or group of page elements needs more deliberate arrangement than normal document flow provides. section 4.1 section 4.0
Choose the parent for a menu
For a menu built from a `<ul>` containing `<li>` elements, put `display: flex` on the `<ul>`. The list items—not the links inside them—then become flex items. Choose the container by asking which immediate children you want to arrange; use direct-child selectors when styling those levels separately. section 4.1.1
Flex items run along the main axis; the cross axis is perpendicular. In a row, the main axis runs horizontally. Set `flex-direction: column` on the container to stack items vertically and turn the main axis downward. This changes which dimension item-sizing properties act on: in a column, `flex-grow`, `flex-shrink`, and `flex-basis` concern height rather than width. section 4.1 section 4.3.1
Make stacked tiles fill a sidebar
An outer row can give its main column and sidebar equal height without making the sidebar’s inner tiles fill that height. Make the sidebar both an item of the outer flexbox and a column flex container: `.column-sidebar { display: flex; flex-direction: column; } .column-sidebar > .tile { flex: 1; }`. Its two tiles can then grow to fill the height supplied by the outer layout. Without a constrained height, a column container instead grows with its contents, so item growth has no extra space to distribute. section 4.3 section 4.3.1
Once the items are roughly placed, adjust the container only where the layout calls for it:
- Use `gap` for separation and `flex-wrap` when items should move onto another line instead of remaining in one row. section 4.4 section 4.4.1
- Use `justify-content` to distribute spare space along the main axis; use alignment properties to position items across it. section 4.4.1 section 4.4.3
- Keep normal document flow where it already does the job. A flex container is a targeted layout choice, not a required wrapper for every element. section 4.4.3
A flex container can also work inside a grid item. When an image and caption leave unused height in a grid cell, their `<figure>` can become a column flex container and the image can grow. Pairing that growth with `object-fit: cover` avoids distorting the rendered image, though it may crop it. section 5.4.2
