CSS flex-flow
CSS flex-flow, is a short hand property, used to place flex items inside flex containers.
CSS flex-flow, is a short hand property, used to place flex items inside flex containers.
This property can be used only with the flex items.
flex-flow can have one of the following values,
- flex-direction : It is used to specify how the flex items should be positioned inside the flex container, following values are used in it
- row: It is the default value. Used to display flex items horizontally.
- column: Used to display flex items vertically.
- row-reverse: Used to display flex items horizontally in reverse order.
- column-reverse: Used to display flex items vertically in reverse order.
- flex-wrap : It is used to specify whether the flex items should be wrapped inside the flex container.
- no-wrap: It is the default value. Used to specify the flex items not to wrap.
- wrap: It is used to specify flex items to wrap if necessary.
- wrap-reverse: It is used to specify flex items to wrap if necessary in reverse order.
In the above example following flex-flow shorthand properties are used,
column-reverse - flex-direction
wrap - flex-wrap