CSS flex-wrap Property

Make the flexible items wrap if necessary:

div {
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;
flex-wrap: wrap;

Try it Yourself »

Definition and Usage

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

Note: If the elements are not flexible items, the flex-wrap property has no effect.

Default value: nowrap
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.flexWrap=”nowrap” Try it
CSS Syntax
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
Property Values
Value Description
nowrap Default value. Specifies that the flexible items will not wrap
wrap Specifies that the flexible items will wrap if necessary
wrap-reverse Specifies that the flexible items will wrap, if necessary, in reverse order
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit