CSS flex-flow Property

Definition and Usage

The flex-flow property is a shorthand for flex-direction and flex-wrap. It sets the flex container’s main axis and whether items can wrap onto more lines.

Use it on an element with display: flex or inline-flex. The initial value is row nowrap. It is not inherited. You can write one keyword or both, in either order.

CSS Syntax

Common pairs: row wrap, column wrap, row nowrap. One value alone is also valid.

Property Values

How to Use flex-flow

One shorthand replaces separate direction and wrap rules.

1. On the parent, set display: flex.
2. Set flex-flow to a direction, a wrap mode, or both (for example row wrap).
3. Give items a basis or width so wrapping has a reason to kick in.
4. Use align-content when you have spare space across multiple lines.

Live Preview

Six items, each about one-third wide. Change flex-flow to see wrap vs nowrap (and column wrap).

CSS Examples

Each snippet shows only what flex-flow needs: a flex container and item sizes that make wrap visible. Use Try It Yourself for a live editor.

<style>
  section {
    display: flex;
    flex-flow: row wrap;
  }

  div {
    width: 32%;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

<style>
  section {
    display: flex;
    flex-flow: row nowrap;
  }

  div {
    width: 32%;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

<style>
  section {
    display: flex;
    flex-flow: column wrap;
    height: 160px;
  }

  div {
    width: 30%;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

Key Takeaways