A flex item is a direct child of a flex container. Set `display: flex` on the parent, and its children become flex items arranged in a row by default. The items follow the main axis; the cross axis runs perpendicular to it. In a row, their heights can match naturally even when their contents differ. `display: inline-flex` changes how the container itself flows, not the basic relationship between container and items. section 4.1
A navigation menu
Make the `<ul>` the flex container, not each link: `.site-nav { display: flex; gap: 1.5rem; }`. Its direct `<li>` children are the flex items; the `<a>` elements inside them remain links. To push one item to the far side, use `.site-nav > .nav-right { margin-inline-start: auto; }`. Put padding on the links themselves so the visible button is also the clickable area. section 4.1.1 section 4.1.2
A flex item’s main-axis size depends on `flex-basis`, `flex-grow`, and `flex-shrink`, commonly set together with `flex`. After initial sizes and gaps are counted, growing items share leftover space according to their grow values. If initial sizes exceed the container, shrinking items can give up space to avoid overflow. For a two-column layout, `flex: 2` and `flex: 1` divide the available remainder roughly two-thirds to one-third; padding can affect precise measurements. section 4.2.2 section 4.2.3
When one item is also a container
Suppose a wide tile sits beside a sidebar containing two stacked tiles. If the wide tile gets taller, the sidebar can be equal height while its inner tiles still stop short. Make the sidebar both an outer flex item and an inner flex container: `.sidebar { flex: 1; display: flex; flex-direction: column; } .sidebar > .tile { flex: 1; }`. The inner tiles now grow along a vertical main axis to fill the sidebar’s height. section 4.3 section 4.3.1
Once sizes are roughly right, use container properties such as `justify-content` and `align-items` for spacing and alignment; `align-self` overrides cross-axis alignment for one item. A price display, for example, can center its three text pieces together while aligning the cents differently. Items normally appear in source order. `order` can change their visual sequence, but a large mismatch may confuse keyboard and screen-reader users. Start with the container, its direct children, and any needed `gap`, direction, or `flex` values; add other controls only when the layout calls for them. section 4.4 section 4.4.2 section 4.4.3
