CSS flex-flow Property

What You’ll Learn

The flex-flow property is a shorthand that sets both flex-direction and flex-wrap in one line. It is a quick way to control how flex items flow and whether they wrap onto new lines.

Introduction

The flex-flow property in CSS is a shorthand property that combines the flex-direction and flex-wrap properties. It defines the direction in which flex items are placed in the flex container and whether they should wrap onto multiple lines.

This property is useful for creating flexible and responsive layouts without needing to write multiple lines of CSS.

Definition and Usage

Apply flex-flow on a flex container alongside display: flex. Use row wrap for tag clouds and card grids, column nowrap for vertical stacks, and column wrap when items should fill columns before moving to the next column.

📝 Syntax

The syntax for the flex-flow property is as follows:

element {
  flex-flow: flex-direction flex-wrap;
}

• flex-direction — Specifies the direction of the flexible items.
• flex-wrap — Specifies whether the flexible items should wrap or not.

Basic Example

.container {
  display: flex;
  flex-flow: row wrap;
}

Default Value

The default value for the flex-flow property is row nowrap, which means the flex items are placed in a single line in the row direction.

Syntax Rules

• Apply on the flex container, not on flex items.
• Order can be direction wrap or wrap direction — the browser detects which is which.
• Omitting wrap defaults to nowrap; omitting direction defaults to row.
• The property is not inherited.
• Use gap for spacing between wrapped items instead of margins when possible.

💎 Property Values

flex-flow accepts values from both flex-direction and flex-wrap:

flex-direction values

flex-wrap values

Common flex-flow Combinations

Examples Gallery

In this example, we’ll create a flex container with items that wrap onto multiple lines and are arranged in a column — plus row wrap grids, default nowrap, and a tag list.

<style>
  .container {
    display: flex;
    flex-flow: column wrap;
    height: 200px;
  }
  .item {
    width: 100px;
    height: 50px;
    background-color: lightcoral;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <!-- items 2–6 -->
</div>

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

.toolbar {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.5rem;
}

.tags {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem;
}

♿ Accessibility

• Wrapping preserves DOM order — screen readers follow source order across wrapped lines.
• Avoid horizontal scroll on nowrap toolbars — ensure buttons remain reachable on small screens.
• Use semantic lists for tags when tags represent categories or filters.
• Test keyboard navigation on wrapped flex rows with many interactive items.
• Do not use wrap-reverse for primary navigation without testing focus order.

💡 Best Practices