📌 Introduction

The flex-wrap property controls whether flex items stay on a single line or wrap onto multiple lines. By default, Flexbox tries to fit all items into one row (or column), but withflex-wrap, items can break into new lines when needed. This is extremely useful for building responsive grids, tag lists, cards, and dynamic layouts. 🎨✨

🎯 What Does flex-wrap Do?

✨ Syntax

container {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

🧩 Values of flex-wrap

1. nowrap (default)

All flex items stay on a single line. Items shrink if needed, causing them to compress tightly.

flex-wrap: nowrap;

2. wrap

Items wrap onto multiple lines, from top to bottom (or left to right depending on direction). This is the most commonly used value for responsive layouts.

flex-wrap: wrap;

3. wrap-reverse

Similar to wrap but items wrap in the opposite direction.

flex-wrap: wrap-reverse;

🔥 Practical Examples

1. Responsive Grid with wrap

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

.item {
  width: 200px;
  height: 100px;
  background: lightblue;
}

2. Tag List that Wraps Automatically

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 6px 12px;
  background: #e5e7eb;
  border-radius: 20px;
}

3. Prevent Wrapping (nowrap)

.navbar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

4. wrap-reverse Example

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

📊 Behavior Comparison

🧠 Important Notes

🎉 Conclusion

The flex-wrap property is essential for creating responsive and flexible layouts. Whether you're building card grids, tag clouds, galleries, or dynamic UI components,flex-wrap: wrap; gives elements the ability to adapt beautifully across screen sizes. Master this property and your Flexbox layouts will feel smooth, natural, and responsive. 🚀