flexFlow Property
Example
Display flexible items in a column and do not wrap:
Definition and Usage
The flexFlow property is a shorthand property for flexDirection and flexWrap properties.
The flexDirection property specifies the direction of the flexible items.
The flexWrap property specifies whether the flexible items should wrap or not.
Note: The flexFlow property has no effect if the element is not a flexible item.
Browser Support
Firefox, Opera, and Chrome support the flexFlow property.
Syntax
Return the flexFlow property:
Set the flexFlow property:
Property Values
| Value | Description |
|---|---|
| flex-direction | Possible values: <br> <br>row <br>row-reverse <br>column <br>column-reverse <br>initial <br>inherit Default value is "row". Specifies the direction of the flexible items. |
| flex-wrap | Possible values: <br> <br>nowrap <br>wrap <br>wrap-reverse <br>initial <br>inherit Default value is "nowrap". Specifies whether the flexible items should wrap or not. |
| initial | Sets this property to its default value. See initial |
| inherit | Inherits this property from its parent element. See inherit |
Technical Details
| Default value: | row nowrap |
|---|---|
| Return value: | String, representing the flex-flow property of the element. |
| --- | --- |
| CSS version | CSS3 |
| --- | --- |
Related Articles
CSS Reference: flex-flow Property
HTML DOM STYLE Reference: flex Property
HTML DOM STYLE Reference: flexBasis Property
HTML DOM STYLE Reference: flexDirection Property
HTML DOM STYLE Reference: flexGrow Property
HTML DOM STYLE Reference: flexShrink Property
HTML DOM STYLE Reference: flexWrap Property