CSS flex-wrap Property


CSS flex-wrap specifies whether flex items are forced into a single line or wrapped across multiple lines. The flex-wrap property enables you to control the direction in which lines are stacked. It is used to specify whether flex items inside the flex container should be in a single line or multiline format.

Syntax

Example

Preview

Property Values

Value Description
nowrap The default value. This specifies that the flexible items will not be wrapped.
wrap This specifies that the flexible items will be wrapped if necessary.
wrap-reverse Specifies that the flexible items will wrap in reverse order if necessary.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Element Chrome Firefox Safari Edge / IE Opera
flex-wrap 29.0
21.0 -webkit-
28.0
18.0 -moz-
9.0
6.1 -webkit-
11.0 17.0