CSS3 flex-flow Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The flex-flow CSS property is a shorthand property for setting the flex-direction and flex-wrap individual properties at once.
The following table summarizes the usages context and the version history of this property.
| Default value: | row nowrap; See individual properties |
|---|---|
| Applies to: | Flex containers |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the flex-flow property in action.
Example
Try this code ».flex-container {
/* Safari */
display: -webkit-flex;
-webkit-flex-flow: row-reverse wrap;
/* Standard syntax */
display: flex;
flex-flow: row-reverse wrap;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
flex-direction |
Specifies how flex items are placed in the flex container. |
flex-wrap |
Specifies whether the flexible items should wrap or not. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element flex-flow property. |
Browser Compatibility
The flex-flow property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 Multi-column Layouts.
Related properties: align-content, align-items, align-self, display, flex, flex-basis, flex-direction, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order.
