Wrapping, Order, and Multi-line

## One line unless you say otherwise A flex container lays its items out along a **main axis** (horizontal for `flex-direction: row`, vertical for `column`) and aligns them along the perpendicular **cross axis**. The `flex-wrap` property decides whether that main axis may be split into more than one *flex line*. Its initial value is `nowrap`, so by default a flex container is single-line: every child sits on one line, however many children there are and however narrow the container is. This catches people out because the layout does not visibly "break" when it runs out of room. It quietly compresses. ## Shrink first, overflow second Each flex item has a **flex-basis**, its starting size along the main axis (`auto` by default, which falls back to the item's `width`/`height` or its content size). The container adds up those base sizes. If the total is larger than the container, the container has negative free space, and it removes that space using each item's `flex-shrink` factor, which is `1` by default. So five 200px items in a 600px container do not wrap — they each become 120px. ```css .row { display: flex; /* flex-wrap is nowrap here */ width: 600px; } .row > div { width: 200px; /* five of these render 120px wide */ } ``` Shrinking has a floor. An item will not shrink below its automatic minimum size, which is roughly its `min-content` size — the width of its longest unbreakable word, or an image's intrinsic width. Once every item is at that floor and the total is still too big, the line overflows the container's content box and, depending on `overflow`, either spills visibly or gets clipped. ## Turning wrapping on ```css .cards { display: flex; flex-wrap: wrap; gap: 1rem; } ``` With `wrap`, the container walks the items in order and starts a new flex line whenever the next item would not fit on the current one. Each resulting line is then laid out largely independently: `flex-grow` and `flex-shrink` are resolved per line, and each line's cross size is driven by the tallest item on it. Multiple lines are then positioned along the cross axis of the container. Two consequences worth internalising: wrapping happens **instead of** shrinking below the natural break point (the browser does not try to shrink items to keep them on one line once wrapping is allowed), and a wrapped container can be taller than any single item because it now stacks lines. ## wrap-reverse `flex-wrap: wrap-reverse` wraps and then flips the cross axis: cross-start and cross-end swap places. In a `row wrap-reverse` container the *first* line ends up at the bottom and subsequent lines stack upward. The order of items **within** each line is unchanged — that is `flex-direction: row-reverse`'s job. A practical side effect is that any cross-axis alignment keyword you already wrote, such as `align-items: flex-start`, now points the other way. ## The flex-flow shorthand `flex-flow` sets `flex-direction` and `flex-wrap` in one declaration, in either order: `flex-flow: row wrap`, `flex-flow: wrap column`, `flex-flow: column-reverse wrap-reverse`. Omitted parts reset to their initial values, so `flex-flow: wrap` also resets direction to `row`. It is a convenience, not a different mechanism. ## Wrapping a column container `flex-wrap` works on the main axis, whatever that axis is. In a `flex-direction: column` container with `flex-wrap: wrap`, items wrap into **additional columns** once the container's height is exhausted — which only happens if the container has a constrained height. A column container with `height: auto` grows forever and will never wrap, which is a common source of "why is wrap doing nothing?". ## Things that commonly go wrong - Putting `flex-wrap` on the item instead of the container: it is a container property and has no effect on a child. - Expecting `overflow: hidden` or `text-overflow: ellipsis` to substitute for wrapping — they hide the symptom on one line, they do not create a second line. - Assuming that because content overflowed, `flex-shrink` "didn't work". It usually did work, right down to the items' minimum sizes. - Reaching for media queries to switch a row to a column, when `flex-wrap: wrap` plus a sensible `flex-basis` often gives a responsive row for free.