flex-flow

flex-flow is the shorthand for flex-direction and flex-wrap. It belongs on a flex container.

A wrapping row

The fixed item bases cannot all fit in this 240px container, so row wrap creates another line. Gap separates both adjacent items and lines.

<div class="items"><span>One</span><span>Two</span><span>Three</span></div>

.items {
  display: flex;
  flex-flow: row wrap;
  width: 240px;
  gap: 0.5rem;
}
.items span {
  flex: 0 0 100px;
  background: #dbeafe;
  padding-block: 0.5rem;
}

A column that wraps at a definite height

Column wrapping needs a bounded main size to determine when another column should begin. This exercise uses a 100px height and three 40px items.

<div class="items"><span>First</span><span>Second</span><span>Third</span></div>

.items {
  display: flex;
  flex-flow: column wrap;
  height: 100px;
  align-content: flex-start;
  gap: 0.5rem;
}
.items span {
  flex: 0 0 40px;
  background: #eff6ff;
  padding-inline: 0.5rem;
}

Values and reset behavior

The constituents initially use row and nowrap and are not inherited. Supply direction, wrapping, or both; omitted parts reset to their initial values. For example, flex-flow:column also resets a previous wrap declaration to nowrap. The two ordinary keyword categories need not always be written in a rigid order.

The newer wrapping balance keyword has separate support requirements. Use a tested row wrap fallback if experimenting with balanced line lengths; basic Flexbox support is not proof of support for that value.

Troubleshooting and order

Display:flex is still required. Column wrap is not a general masonry-layout solution and an unconstrained height may produce no wrapping. Wrapping does not guarantee that a single oversized item fits.

Reverse values affect visual flow, not the logical reading or keyboard order. Use align-content to distribute multiple lines only when the cross axis has available space.

Sources and browser support

MDN: flex-flow describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.