CSS flex-flow property

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.

Example

Try Yourself

In the above example following flex-flow shorthand properties are used,

column-reverse - flex-direction

wrap - flex-wrap