nowrap keeps a flex container’s items on one line instead of moving them into additional rows or columns. It is the default flex-wrap value, so declaring it is optional. section 12.2
Picture a row of toys on a shelf:
- With row or row-reverse, items stay in one row; with column or column-reverse, they stay in one column. section 12.2
- When the items do not fit, flexbox shrinks them along the main axis rather than wrapping them. section 12.2
- Use wrap instead when items should continue on multiple rows or columns. section 12.2
container {
display: flex;
flex-wrap: nowrap|wrap|wrap-reverse;
}
Try flex-wrap: nowrap alongside wrap and wrap-reverse to compare how the same flex container arranges its items. section 12.2
