The flex-flow property is the shorthand used on a flex container to express both the container’s main-axis orientation and its wrapping behavior in a single declaration. By combining those two concerns, it provides a compact way to control whether child items are laid out along a horizontal or vertical axis and whether they are allowed to break onto multiple lines when space is constrained. Using this shorthand makes it easier to reason about the high-level flow of items without repeating separate declarations.

As a container-level setting, flex-flow only has effect when the element is a flex container — i.e., when its display mode establishes a flex formatting context. See display for more about creating flex containers. The choice of axis set through flex-flow determines which dimension is considered the “main” axis and which becomes the “cross” axis; that in turn changes how size, alignment, and wrapping behaviors are interpreted for the item collection. Allowing wrapping (the other part of the shorthand) changes whether items stay on one line or form multiple flex lines that can be laid out and aligned independently.

Although flex-flow directly controls only axis and wrap, its practical effect is shaped by many other flexbox properties. For example, alignment along the main axis is handled by justify-content, while alignment along the cross axis for individual items is governed by align-items and the alignment of multiple flex lines is controlled by align-content. Individual item ordering and distribution are still managed by per-item properties such as order and the various flex-family properties. In practice, think of flex-flow as setting the fundamental orientation and line behavior that all those other properties then refine.