Flex-wrap
The CSS flex-wrap property specifies whether flex items remain on one line or wrap onto multiple lines.
Web Design Playground
A CSS flexbox property that determines whether flex items stay on one line or wrap onto multiple lines.
- How it is used
- Controls whether crowded flex-container items remain on one line or flow onto multiple lines.
- How deep it goes
- Defines all three values and contrasts wrapping with default item shrinking, then links wrapped lines to align-content.
- Examples
- Uses an interactive flex-wrap comparison and a flexible-layout conversion from a liquid layout.
- What you can do after
- Apply it via CSS flexbox to make container items wrap instead of shrink when space runs out.
Web Design Playground, Second Edition
The CSS flex-wrap property specifies whether flex items are forced onto one line or can wrap onto multiple lines.
- How it is used
- Controls whether Flexbox items remain on one line or wrap into multiple rows or columns.
- How deep it goes
- Defines three values and contrasts wrapping with item shrinking, but defers detailed multi-line alignment to align-content.
- Examples
- Uses nowrap, wrap, and wrap-reverse in a flex container, with an interactive comparison and a figure showing their effects.
- What you can do after
- Apply it via CSS to choose whether flex items stay together or form additional rows or columns.
Read how Web Design Playground, Second Edition explains flex-wrap →
CSS in Depth, Second Edition
The CSS flex-wrap property specifies whether flex items remain on one line or wrap onto additional lines or columns.
- How it is used
- Controls whether flex items remain in one line or move into additional rows or columns when the container cannot contain them.
- 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 you can do after
- Apply wrapping rules to flex containers and predict when items form new rows or columns.
Related concepts
- 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.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.