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.

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 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 similar 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