CSS flex-wrap Property

CSS flex-wrap Property

The flex-wrap property in CSS controls whether flex items wrap onto multiple lines when they don’t fit in a single row or column.

1. Syntax

selector {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Value	Description
nowrap (default)	All flex items stay on one line, even if they overflow.
wrap	Flex items wrap to a new line if needed.
wrap-reverse	Flex items wrap in reverse order (bottom to top or right to left).

2. Basic Example

✅ Flex Container with wrap

.container {
  display: flex;
  flex-wrap: 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 wrap onto multiple lines if the container is too small.

✅ nowrap (Default – No Wrapping)

.container {
  display: flex;
  flex-wrap: nowrap;
}

✅ All items stay in one row (overflowing if necessary).

✅ wrap-reverse (Reverse Wrapping)

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

✅ Items wrap in reverse order (bottom-to-top or right-to-left).

3. Combining with flex-direction

The wrapping behavior changes based on flex-direction:

• row (default) → Wraps to a new row below
• column → Wraps to a new column to the right

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

✅ Items wrap into a new column instead of a new row.

4. Best Practices

✔ Use flex-wrap: wrap; for responsive layouts.
✔ Avoid nowrap if elements overflow the container.
✔ Combine with justify-content for better alignment.