Flex Flow CSS Properties
The flex-flow value is a shortcut to specify the flex-direction wrapping direction of the flexbox and the flex-wrap wrapping behavior in one line. flex-flow: row nowrap is the default.
flex-flow Syntax
1. Single Value Writable. flex-flow value can only contain flex-direction or flex-wrap value.
/* Can contain only flex-direction value so flex-wrap will default to nowrap */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;
/* Can contain only flex-wrap value so that flex-direction value will be default row */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
2. Valuable Writable
As we mentioned at the beginning of the article, flex-flow is a CSS shortcut for flex direction and wrapping behavior. It is also possible to write it with a single expression as above.
/* It is written as 2 values as follows. */
flex-flow: row nowrap;
flex-flow: row wrap;
flex-flow: column wrap;
flex-flow: column wrap-reverse;
flex-flow: column-reverse wrap-reverse;
3. Global Values
/* Global Values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: unset;