56. Flex Container Shorthand: flex-flow

The flex-flow property is a shorthand that combines the two directional properties of the flex container: flex-direction and flex-wrap.

Syntax

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

Example

If you want a vertical stack that is allowed to wrap in reverse order (a strange but possible layout):

css /* Longhand */ .container-long { display: flex; flex-direction: column; flex-wrap: wrap-reverse; }

/* Shorthand Equivalent */ .container-short { display: flex; flex-flow: column wrap-reverse; }

Most Common Use Case (Wrapping Row)

Since row and nowrap are the defaults, they are often omitted if you only set one, but the most common definition for standard wrapping behavior is:

css .standard-row-wrap { display: flex; flex-flow: row wrap; /* Layout horizontally, allow wrapping */ }

Benefit: Using flex-flow can keep your container declarations cleaner and grouped together, emphasizing that these properties define the core behavioral flow of the container.