CSS Reference Manual

CSS @rules (RULES)

Comprehensive CSS Properties

CSS3 flex-grow attribute CSS3 flex-direction attribute

CSS3 flex-flow attribute usage and examples

flex-The flow CSS attribute is used to setflex-directionandflex-wrapAbbreviations of various properties.

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

Default value:	row nowrap; View all properties
Applies to:	Flexible container
Inheritance:	None
Animated:	No.Please see Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object.style.flexFlow="column nowrap"

flex-The syntax of flow usage

The syntax of this attribute is as follows:

flex-flow: [ flex-direction flex-wrap ] | initial | inherit

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

Example

.flex-container {
　　　　/*　Safari　*/
　　　　display:　-webkit-flex
　　　　-webkit-flex-flow: row-reverse wrap;
　　　　
　　　　display: flex;
　　　　flex-flow: row-reverse wrap;
}

Test and see‹/›

Attribute value

The table below describes the value of this attribute.

Value	Description
flex-direction	Specify the placement method of the flexible item in the flexible container.
flex-wrap	Specify whether the flexible item is split into rows or columns.
initial	Set this property to its default value.
inherit	If specified, the associated elements adopt the flex of their parent element-flow attribute values.

Browser compatibility

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

	Firefox 18+ ^-moz-,28 Google Chrome 21+ ^-webkit-,29 Internet Explorer 10+ ^-ms-,11 Apple Safari 6.1+ ^-webkit- Opera 12.1+

For further reading

Please refer to the following tutorials:CSS3Multi-column layout.

CSS3 flex-grow attribute CSS3 flex-direction attribute