flex-wrap

The flex-wrap property designates whether the items inside a flex container should wrap or not.

Syntax

This property only has an effect on flexible items.

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

Values

nowrap
Default value. The items will not wrap.

wrap
If necessary, the items will wrap.

wrap-reverse
If necessary, the items will wrap, but in reverse order.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of flex-wrap? Submit a codepen.io demo and we'll showcase it here ↴