Retour au cours

Lesson 56: Flex Container Shorthand: flex-flow

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

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.