Think of flex items as cards on a table. When the table gets crowded, flex-wrap decides whether the cards squeeze onto one line or start a new line. It is a property of the flex container, not of an individual item. section 12.2
Without a wrapping rule, a flex container uses nowrap by default. With a row-based main axis, items that do not fit are shrunk along that axis to stay in one row. With a column-based main axis, the same idea applies to one column. section 12.2
Choose one of three values:
- nowrap keeps every item on one row or column. You normally do not need to write it because it is the default. section 12.2
- wrap lets items move onto as many new rows or columns as necessary instead of shrinking to fit. section 12.2
- wrap-reverse also creates new lines, but places them at the end of the cross axis. section 12.2
container {
display: flex;
flex-wrap: nowrap|wrap|wrap-reverse;
}
Add this rule to a flex container. Try changing one value at a time, then make the container narrower and watch the arrangement change. section 12.2
A layout that can make room
For a group of blocks that should stay roomy, turn on wrapping rather than forcing every block into one crowded row. flex-wrap works with flex-grow, flex-basis, and flex-shrink: blocks can keep a suggested minimum size, use the desired proportions, and wrap when horizontal room runs out. section 13.9
Once wrapping creates multiple rows or columns, align-content controls how those whole lines are arranged along the cross axis. That is different from align-items, which arranges the items within a line. section 12.18 section 12.2
Quick play: create a flex container with several items, set flex-wrap to wrap, and shrink its available space. Then switch to nowrap and notice the difference: new lines versus items shrinking along the main axis. section 12.2
