The CSS flex-wrap property decides whether flex items stay on one line or move onto multiple rows or columns. By default, Flexbox uses nowrap and shrinks items to make them fit. section 12.2
Choose the behavior that fits your container:
- nowrap keeps all items on one row or column; it is the default. section 12.2
- wrap moves items onto as many rows or columns as needed. section 12.2
- wrap-reverse creates multiple lines at the end of the cross axis. section 12.2
Make a row wrap
container { display: flex; flex-direction: row; flex-wrap: wrap; } When the items become too wide for the row, the browser places the extras on additional rows instead of shrinking everything to fit. section 12.2
container {
display: flex;
flex-wrap: nowrap|wrap|wrap-reverse;
}
Try nowrap, wrap, and wrap-reverse to see how the container's items move. section 12.2
