The flex-wrap property controls whether flex items are forced onto a single line or allowed to form multiple lines inside a flex container. When wrapping is permitted, the items create additional flex lines along the container’s cross axis; each line is treated as a separate row (or column, depending on axis orientation) and items on later lines participate in layout and alignment independently of items on earlier lines. Allowing wrapping is a common way to prevent overflow of child elements and to enable more fluid, content-driven layouts where items naturally reflow when container size changes.

Because wrapping affects how items are distributed across the container’s axes, it must be considered together with how the container is established and oriented — for example, with display set to create a flex formatting context and the chosen flex-direction, which defines the main and cross axes. There is also a shorthand that combines orientation and wrapping behavior, flex-flow, making it convenient to set both aspects in a single declaration. Changes to the axis orientation or enabling wrapping can dramatically alter visual order, line breaks, and the direction in which new lines are added.

When multiple lines exist, the spacing and distribution of those lines along the cross axis is controlled separately from individual item alignment — for that purpose align-content becomes important, since it governs how the lines themselves are packed or stretched inside the container. Wrapping also interacts with item sizing behaviors (flex-basis, min/max constraints, and growth/shrink behavior) so that the same set of items can produce very different layouts depending on whether wrapping is allowed. Practically, enabling wrapping is a key tool for responsive design: it lets items reorganize into multiple rows or columns as available space changes, avoiding horizontal overflow and enabling predictable stacking without resorting to absolute positioning or media-query-only approaches.