CssHow-ToBeginner · 3 min read

How to Use flex-flow in CSS: Syntax and Examples

The flex-flow property in CSS is a shorthand for setting both flex-direction and flex-wrap on a flex container. It controls the direction of flex items and whether they wrap onto multiple lines. Use it like flex-flow: row wrap; to set direction and wrapping together.

📐

Syntax

The flex-flow property combines two properties:

flex-direction: sets the direction of flex items (row, column, row-reverse, column-reverse)
flex-wrap: controls if items wrap to next line (nowrap, wrap, wrap-reverse)

Syntax pattern:

flex-flow: <flex-direction> || <flex-wrap>;

You can specify one or both values. If only one is given, it sets flex-direction by default.

css

flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: row-reverse wrap-reverse;

💻

Example

This example shows a flex container with flex-flow: row wrap;. Items are arranged in a row and wrap to the next line if needed.

html

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}
.container {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  background-color: #f0f0f0;
  padding: 1rem;
  width: 300px;
  border: 2px solid #333;
}
.item {
  background-color: #4CAF50;
  color: white;
  padding: 1rem;
  flex: 0 0 100px;
  text-align: center;
  border-radius: 4px;
}

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

Output

A horizontal row of green boxes labeled 1, 2, 3, 4 inside a gray container. When the container width is small, boxes wrap to next line.

⚠️

Common Pitfalls

Common mistakes when using flex-flow include:

Forgetting that flex-flow sets both flex-direction and flex-wrap, so setting one separately may override the shorthand.
Using invalid values that are not part of flex-direction or flex-wrap.
Assuming flex-flow controls item alignment or spacing (it does not).

css

/* Wrong: only flex-wrap value given, flex-direction resets to default (row) */
.container {
  flex-flow: wrap; /* treated as flex-direction, invalid */
}

/* Right: specify both or only flex-direction */
.container {
  flex-flow: row wrap;
}

.container {
  flex-flow: column;
}

📊

Quick Reference

Summary of flex-flow values:

Property	Possible Values	Description
flex-direction	row \| row-reverse \| column \| column-reverse	Direction of flex items
flex-wrap	nowrap \| wrap \| wrap-reverse	Whether items wrap to next line

✅

Key Takeaways

flex-flow is a shorthand for flex-direction and flex-wrap combined.

Specify direction and wrap together like flex-flow: row wrap; for easier code.

If only one value is given, it sets flex-direction by default.

Avoid invalid values and remember flex-flow does not control alignment or spacing.

Use flex-flow to keep flex container styles concise and clear.