DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!
The flex-flow property is a sub-property of the Flexible Box Layout module. It is a shorthand for flex-direction and flex-wrap.
.element {
flex-flow: row wrap;
}Syntax
flex-flow: <‘flex-direction’> || <‘flex-wrap>;You can specify one or two values, no matter the order.
Demo
Both lists behave in the exact same way:
- The blue one has
flex-direction: rowandflex-wrap: wrap - The red one has
flex-flow: row wrap
Browser support
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10 1 11 | All | 20-48 2 49+ 3 | 21-28 4 29+ | 7-8 4 9+ | 12.1+ |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| 7-8.4 4 9+ | 92+ | 90+ | 92+ | 12.1+ |
- 1 Supported with prefix
-ms - 2 Partial support
- 3 Supported with prefix
-moz- - 4 Supported with prefix
-webkit-
For more informations about how to mix syntaxes in order to get the best browser support, please refer to “Using Flexbox” and this article from DevOpera.
More information
- CSS Flexible Box Layout Module Level 1
- MDN documentation
- Advanced cross-browser flexbox
- A guide to Flexbox
- Using Flexbox
- Old Flexbox and new Flexbox
Hi Chris,
Just a note that flex-flow: row wrap; (shorthand or long) is only supported in Chrome and Opera right now. The other browsers don’t “wrap” rows yet.
Here’s your codepen in Firefox 22, Chrome 27, and Safari 6.
Little more info at
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow
Aside from some IE bugs (for which there are workarounds), support is pretty good nowadays.
http://caniuse.com/#feat=flexbox
<
script>
Hello
<
script>
By mistake, pls ignore
<
script>
alert(“Hello”);
<
script>
By mistake, pls ignore
Is there anyway to center the flex-container? I am trying to do some tricks here and the flex-container is always aligned to the left.
margin: 0 auto;
And some other methods: https://css-tricks.com/centering-css-complete-guide/