Intro to CSS Flexbox - Flex Wrap

A flex container flexes its items with no overflow effects. The flex items within the parent flex container will always try to fit all items on one line by default.

Flex wrap allows you to change that behavior by allowing the flex items to wrap as needed with this property. You can additionally control which direction they wrap which makes this property quite powerful!

I tend to use flex-wrap almost always with responsive layouts as on small screens flex items will need to often collapse to their own width of the viewport.

/* flex-wrap options*/
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (the default): all flex items will be on one line
• wrap: flex items wrap onto multiple lines (from top to bottom).
• wrap-reverse: flex item wrap onto multiple lines (from bottom to top).

CodePen

See the Pen flex-wrap by Andy Leverenz (@webcrunchblog) on CodePen.