The flex-wrap Property of CSS

The flex-wrap Property

The `flex-wrap` property specifies whether the flex items should wrap or not.

The examples below have 12 flex items, to better demonstrate the `flex-wrap` property.

The `wrap` value specifies that the flex items will wrap if necessary

 .flex-container {
  display: flex;
  flex-wrap: wrap;
}

The `nowrap` value specifies that the flex items will not wrap (this is default)

 .flex-container {
  display: flex;
  flex-wrap: nowrap;
}

The `wrap-reverse` value specifies that the flexible items will wrap if necessary, in reverse order

 .flex-container {
  display: flex; 
  flex-wrap: wrap-reverse;
}

The `flex-flow` property is a shorthand property for setting both the `flex-direction` and `flex-wrap` properties

.flex-container {
  display: flex;
  flex-flow: row wrap;
}