The CSS flex-wrap property specifies whether flex items remain on one line or wrap onto additional lines or columns.
The flex-wrap property controls whether flex items stay on one line or wrap onto additional rows or columns when they would overflow their flex container. section 4.4.1
Choose the behavior that matches the container’s layout constraints:
nowrap is the initial value and keeps items on one line. section 4.4.1
wrap moves overflowing items onto a new row instead of shrinking them according to flex-shrink. section 4.4.1
wrap-reverse enables wrapping in the reverse direction. section 4.4.1
With column or column-reverse, wrapping creates additional columns only when the container’s height is constrained. section 4.4.1
Combine direction and wrapping
Use flex-flow: column wrap when items should flow from top to bottom and continue in a new column when the constrained height is exceeded. section 4.4.1
How CSS in Depth, Second Edition covers it
How deep it goes
Defines three values and explains overflow, flex-shrink interaction, and height constraints for column wrapping.
Examples
Uses nowrap, wrap, wrap-reverse, and flex-flow: column wrap as concrete declarations.
What it assumes
Assumes familiarity with flex containers and flex-direction while defining wrapping behavior directly.
What you can do after
Apply wrapping rules to flex containers and predict when items form new rows or columns.
How it connects
Connects flex-wrap with flex-direction, flex-flow, flex-shrink, and flex containers.
flex-flowconfigured by · The CSS flex-flow property is a shorthand that sets a flex container's flex-direction and flex-wrap properties.
flexboxconfigures · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
overflowaddresses · Content overflow is the condition in which content extends beyond the bounds of its containing box or viewport.
flex containerconfigures · A flex container is an element whose children are laid out as flex items according to the CSS Flexible Box Layout model.
mainused by · The HTML main element identifies the dominant content of a document or application view, excluding shared navigation and peripheral content.
This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.
