Layout
flex-wrap
flex-wrap sets whether flexbox items that do not fit on one line wrap onto the next line.
Syntax
nowrap | wrap | wrap-reversePreview
1234
Presets
Sample
Drag the bottom-right corner to resize
Code
.box {
display: flex;
flex-wrap: wrap;
}Controls
flex-wrapwrap
1234
About
Values
nowrap: keeps the items on one line. When they do not fit, they shrink (flex-shrink) and whatever cannot shrink overflows the box. This is the initial value.wrap: moves items that do not fit onto the next line. When items run across, new lines are added below.wrap-reverse: wraps, but new lines are added in the opposite direction (above, when items run across).
The preview on this page sets display: flex as a helper declaration and places four items, each 30% of the box width. With nowrap they shrink to 25% each, and with wrap they split into three and one.
Aligning wrapped lines
align-items aligns items within a line, and align-content arranges the lines themselves. Use row-gap (gap) to space the lines apart.
With flex-direction: column, items keep growing downward and never wrap unless the box has a height or a maximum height. Give the box one to wrap into columns.
Shorthand
flex-flow sets flex-direction and flex-wrap together (flex-flow: row wrap).