CSS flex-flow Property

CSS flex-flow Property

The flex-flow property in CSS is a shorthand for setting both flex-direction and flex-wrap in a single declaration. It controls the direction and wrapping behavior of flex items inside a flex container.

1. Syntax

selector {
  flex-flow: [flex-direction] [flex-wrap];
}

Property	Description
flex-direction	Defines the main axis direction (row, row-reverse, column, column-reverse).
flex-wrap	Controls whether items wrap (nowrap, wrap, wrap-reverse).

2. Basic Usage

✅ Default Flex Behavior (row nowrap)

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

✅ Items are placed in a row and do not wrap.

✅ Wrapping Items in a Column

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

✅ Items stack in a column and wrap when needed.

3. Example – Two-Row Wrapping Layout

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

.item {
  width: 150px;
  height: 50px;
  background: lightblue;
  text-align: center;
  line-height: 50px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

✅ Items arrange in a row and wrap to a new line when needed.

4. Available Values

flex-flow Value	Equivalent to
row nowrap (default)	flex-direction: row; flex-wrap: nowrap;
column wrap	flex-direction: column; flex-wrap: wrap;
row wrap-reverse	flex-direction: row; flex-wrap: wrap-reverse;

5. Best Practices

✔ Use flex-flow: row wrap; for responsive layouts.
✔ Use flex-flow: column nowrap; for vertical layouts without wrapping.
✔ Combine with justify-content and align-items for better alignment.