CSS flex-flow Property

The flex-flow property is a sub-property of the flexible box layout module and also a shorthand property for flex-wrap and flex-direction.

Note:

The flex property is useless when the element is not a flexible item.

Syntax:

flex-flow: flex-direction flex-wrap;

Values of flex-flow property:

row nowrap: It arranges the row the same as the text direction and the default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrap in single lines. Syntax:

flex-flow: row nowrap; 

row-reverse nowrap: It arrange the row opposite of text direction and the default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrap in single lines. Syntax:

flex-flow: row-reverse nowrap; 

column nowrap: same as row but top to bottom and the default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrap in single lines. Syntax:

flex-flow: column nowrap; 

column-reverse nowrap: Same as row-reverse top to bottom and the default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrap in single lines. Syntax:

flex-flow: column-reverse nowrap; 

row wrap: It arrange the row same as text direction and wrap property is used to break the flex item into multiples lines. It makes flex items wrap to multiple lines according to flex item width Syntax:

flex-flow: row wrap; 

row-reverse wrap: It arrange the row opposite of text direction and wrap property is used to reverse the flow of the flex items when they wrap to new lines. Syntax:

flex-flow: row-reverse wrap; 

column wrap: It arrange the row same as row but top to bottom and wrap property is used to reverse the flow of the flex items when they wrap to new lines. Syntax:

flex-flow:column wrap; 

column-reverse wrap: It arrange the row same as row-reverse top to bottom. and wrap property is used to reverse the flow of the flex items when they wrap to new lines. Syntax:

flex-flow:column-reverse wrap; 

row wrap-reverse: It arrange the row same as text direction and wrap-reverse property This property is used to reverse the flow of the flex items when they wrap to new lines. Syntax:

flex-flow:row wrap-reverse; 

row-reverse wrap-reverse: It arrange the row opposite text direction and wrap-reverse property This property is used to reverse the flow of the flex items when they wrap to new lines. Syntax:

flex-flow:row-reverse wrap-reverse; 

column wrap-reverse: It arrange the row same as row but top to bottom.and wrap-reverse property This property is used to reverse the flow of the flex items when they wrap to new lines. Syntax:

flex-flow:column wrap-reverse; 

column-reverse wrap-reverse: It arrange the row same as row-reverse top to bottom and wrap-reverse property This property is used to reverse the flow of the flex items when they wrap to new lines. Syntax:

flex-flow:column-reverse wrap-reverse; 

Supported Browser :

• Google Chrome 29.0
• Internet Explorer 11.0
• Mozila Firefox 28.0
• Safari 9.0
• Opera 17.0