flex-flow

Jump to: navigation, search

flex-flow

This article is In Progress.


W3C Candidate Recommendation

Summary

The flex-flow CSS property defines the flex container's main and cross axis. It is a shorthand property for the flex-direction and flex-wrap properties.

Overview table

Initial value See individual properties.
Applies to flex containers
Inherited No
Media visual
Computed value See individual properties.
Animatable No
CSS Object Model Property flexFlow

Syntax

  • flex-flow: <flex-direction> <flex-wrap>


Values

<flex-direction> <flex-wrap>
The shorthand value includes the values of the following properties:

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
21.0
prefix
28.0
Yes
11
Yes
12.10
Yes
?
none

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
Unknown
28.0
Yes
?
none
12.10
Yes
?
none


Examples

View live exampleDisplaying children in a row wrapping to the next line.

CSS

.list {
  display: flex;
  flex-flow: row wrap;
}

.list div {
  flex: 1;
}

View live exampleThe Holy Grail Layout example.

CSS

flex-flow: row;



Related specifications

Specification Status Related Changes
CSS Flexible Box Layout Module Candidate Recommendation

Compatibility

Compatibility for

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Related articles

Flexbox










  • flex-flow







External resources

Also, check out the following live demo sites: