CSS flex-wrap property

CSS flex-wrap property CSS reference manual


Let the elastic box element split when necessary:

display:flex;
flex-wrap: wrap;

Try it out . . .

Browser support

The numbers in the table support the version number of the first browser for this property.

The number immediately after -webkit-, -ms - or -moz - is the first version that supports the prefix property.

Property
flex-wrap 29.0
21.0 -webkit-
11.0
10.0 -ms-
28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0

Definitions and usages

The flex-wrap property specifies that the flex container is a single or multiple line, and that the direction of the horizontal axis determines the direction of the new row stack.

Note: The flex-wrap property does not work if the element is not an element of an elastic box object.

Default: nowrap
Inherited: Whether
Animated: Whether. S ee Animation .
Version: CSS3
JavaScript syntax: object .style.flexWrap="nowrap" Give it a try


CSS syntax

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

The property value

value describe
nowrap Defaults.The flexible project does not remove the line or not detachable.
wrap The stipulates that the flexible project will be removed or removed when necessary.
wrap-reverse The stipulates that the flexible project is removed or removed when necessary, but in the opposite order.
initial Set this property for its default value.See initial
inherit Inheriting this property from the parent element.See inherit


Related articles

CSS Reference Manual: flex attribute

CSS Reference Manual: flex-direction properties

CSS Reference Manual: flex-flow properties

CSS Reference Manual: flex-grow property

CSS Reference Manual: flex-shrink properties

CSS Reference Manual: flex-basis properties


CSS flex-wrap property CSS reference manual