Wrap lets content move onto a new line when one horizontal row no longer has enough room. In Flexbox, it is a container choice: keep items on one line, or let them form additional lines. section 12.2
Think of wrapping as giving a row of items permission to make another row:
- nowrap keeps the items together on one line. section 12.2
- wrap lets items continue on new lines when needed. section 12.2
- wrap-reverse provides the reverse wrapping direction. section 12.2
A flexible photo gallery
A photo gallery can place thumbnails in a Flexbox container, center them horizontally, and allow them to wrap into additional rows as space changes. section 15.28
container {
display: flex;
flex-wrap: nowrap|wrap|wrap-reverse;
}
Use the flex-wrap declaration to choose whether Flexbox items stay on one line, wrap, or wrap in reverse. section 12.2
