Flex Wrap

By default, flex items try to fit on a single line. If you have five items that each take up 200px of width but your container is only 500px wide, they will shrink to fit. Sometimes you want them to wrap onto new lines instead. That is exactly what flex-wrap does.

This property is super useful when you are building things like photo galleries or card layouts where you want items to flow naturally across multiple rows.

The Three Values

flex-wrap has three values: nowrap (the default), wrap, and wrap-reverse. With nowrap, everything stays on one line no matter how cramped it gets. With wrap, items break onto new lines as needed. And wrap-reverse wraps them but stacks new lines above the first one instead of below.

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

.item {
  width: 200px;
  height: 150px;
}
    

When the container runs out of room, items automatically drop to the next line. You can control how each line behaves with align-content, which works just like it does in grid.

Practical Example: Card Layout

Say you are building a set of product cards. You do not know how many will exist, and you do not want to hard-code rows. flex-wrap: wrap handles this perfectly — cards flow onto new lines automatically.

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 0 0 250px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
    

The flex: 0 0 250px on the cards means they will not grow or shrink — they stay at 250px wide. When the row fills up, the next card drops down. Clean and simple.

The wrap-reverse Twist

wrap-reverse is少见 but handy. It makes new lines appear above the previous ones instead of below. Think of it as reversing the stacking order of your wrapped rows. You might use this when you want the most recently added items to appear at the top.

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