flex-flow

Definition

The flex-flow CSS property is a shorthand property that combines both the flex-direction and flex-wrap properties in a single declaration. It allows you to specify the direction of flex items and whether they should wrap onto multiple lines or not. The flex-flow property accepts two values: the flex-direction value followed by the flex-wrap value.

For example, flex-flow: row wrap; sets the flex items to be laid out in a row direction and allows them to wrap onto multiple lines if necessary. It provides a convenient way to control both the direction and wrapping behavior of flex items within a flex container.

Syntax

.layout {
  flex-flow: row wrap;
}

Values

<flex-direction> <flex-wrap> shorthand.
row nowrap is the default.

Practical Examples

.layout {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
}

Combine direction and wrapping in a single declaration.

HTML

Item

Code

<div class="flex flex-wrap gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm" style="display:flex; flex-flow: row wrap; gap:1rem;">
  <div class="flex h-16 w-24 items-center justify-center rounded-lg bg-slate-100 text-sm text-slate-700">Item</div>
  <div class="flex h-16 w-24 items-center justify-center rounded-lg bg-slate-100 text-sm text-slate-700">Item</div>
  <div class="flex h-16 w-24 items-center justify-center rounded-lg bg-slate-100 text-sm text-slate-700">Item</div>
  <div class="flex h-16 w-24 items-center justify-center rounded-lg bg-slate-100 text-sm text-slate-700">Item</div>
</div>

Tips & Best Practices

Use column wrap for masonry-like columns at wider viewports.
Pair with gap to control spacing between wrapped items.

Accessibility & UX Notes

Wrapping ensures content doesn’t overflow horizontally, benefiting keyboard and low-vision users.

Browser Support

Supported in modern browsers.

flex-direction and flex-wrap.
align-content for aligning lines when wrapping.