CSS flex-flow

The flex-flow property is a shorthand property that allows you to set both the flex-direction and flex-wrap properties at the same time. The flex-direction property specifies the direction in which flex items are placed in the flex container, while the flex-wrap property defines whether the flex items are forced onto a single line or can be wrapped onto multiple lines.

The syntax for the flex-flow property is as follows:

flex-flow: <flex-direction> <flex-wrap>;

Where <flex-direction> can be one of the following values:

row: Flex items are placed in the same direction as the main axis (horizontally).
row-reverse: Flex items are placed in the opposite direction as the main axis (horizontally).
column: Flex items are placed in the same direction as the cross axis (vertically).
column-reverse: Flex items are placed in the opposite direction as the cross axis (vertically).

And <flex-wrap> can be one of the following values:

nowrap: Flex items are all forced onto one line.
wrap: Flex items wrap onto multiple lines if needed.
wrap-reverse: Flex items wrap onto multiple lines in reverse order.

Let's see an example of how the flex-flow property works:

Result:

In this example, we have set the flex-flow property to row wrap, which means that the flex items will be placed in a row direction and will wrap onto multiple lines if needed. The justify-content: center; property centers the flex items within the flex container.