CSS reference manual

CSS @rules

CSS attribute大全

CSS float attribute CSS3 flex-shrink attribute

CSS3 flex-Usage and examples of wrap attribute

flex-The wrap CSS attribute specifies whether to force the flex items to be placed on a single line or to be placed in multiple lines or columns according to the available space in the flex container.

The following table provides usage instructions and version history of this attribute, as well as the usage syntax of this attribute in JavaScript scripts.

Default value:	nowrap
Applicable to:	Flexible container
Inheritance:	None
Animatable:	No.Please see Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object.style.flexWrap="wrap-reverse"

flex-Syntax of wrap usage

The syntax of this attribute is as follows:

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

The following examples demonstrate how to use flex-wrap attribute.

Example

.flex-container　{
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-wrap: nowrap;
　　　　
　　　　display: flex;
　　　　flex-wrap: nowrap;
}

Test see‹/›

Attribute values

The following table describes the values of this attribute.

Value	Description
nowrap	Default value. Specify that flexible items will not be split into lines or columns.
wrap	Specify if necessary, the flexible items will be split into multiple lines.
wrap-reverse	Same as wrap, but items will be wrapped in the opposite order.
initial	Set this property to its default value.
inherit	If specified, the associated elements will use their parent element's flex-Wrap attribute values.

Browser compatibility

flex-Browser compatibility of the wrap attribute, the numbers in the table below represent the minimum version number of the browsers that support this attribute; all mainstream browsers support this attribute.

	Firefox18+ ^-moz-,28+ Google Chrome 21+ ^-webkit-,29+ Internet Explorer 11+ Apple Safari 6.1+ ^-webkit- Opera 12.1+