CSS `flex-wrap` Property

CSS Reference Manual

Example

Make flex items wrap as needed:

display: flex;
flex-wrap: wrap;

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers following -webkit-, -ms-, or -moz- indicate the first version that supported the prefixed property.

Property	Chrome	IE	Firefox	Safari	Opera
flex-wrap	29.0 <br>21.0 -webkit-	11.0 <br>10.0 -ms-	28.0 <br>18.0 -moz-	9.0 <br>6.1 -webkit-	17.0

Definition and Usage

The flex-wrap property specifies whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction of the new lines.

Note: The flex-wrap property has no effect if the element is not a flex container.

Default value:	nowrap
Inherited:	no
Animatable:	no. See animatable
Version:	CSS3
JavaScript syntax:	object.style.flexWrap="nowrap" Try it

CSS Syntax

Property Values

Value	Description
nowrap	Default. Flex items are not wrapped.
wrap	Flex items are wrapped as needed.
wrap-reverse	Flex items are wrapped as needed in reverse order.
initial	Sets this property to its default value. See initial
inherit	Inherits this property from its parent element. See inherit

CSS Reference Manual: flex Property

CSS Reference Manual: flex-direction Property

CSS Reference Manual: flex-flow Property

CSS Reference Manual: flex-grow Property

CSS Reference Manual: flex-shrink Property

CSS Reference Manual: flex-basis Property