CSS flex-wrap Property

What You’ll Learn

The flex-wrap property controls whether flex items stay on one line or wrap onto multiple lines. It is essential for responsive layouts that adapt to different screen sizes and orientations.

Introduction

The flex-wrap property in CSS is used in flexbox layouts to control whether flex items are forced onto one line or can wrap onto multiple lines. This property is essential for creating responsive designs that adapt to different screen sizes and orientations.

Definition and Usage

Apply flex-wrap on a flex container with display: flex or display: inline-flex. Use wrap for card grids, tag lists, and toolbars where items should move to the next line when horizontal space runs out. Use nowrap when every item must stay on a single row or column.

📝 Syntax

The syntax for the flex-wrap property is simple and can be applied to any flex container:

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

Basic Example

.card-grid {
  display: flex;
  flex-wrap: wrap;
}

Default Value

The default value of the flex-wrap property is nowrap, meaning that all flex items will be kept on a single line, even if they overflow the container.

Syntax Rules

• Apply on the flex container, not on individual flex items.
• Requires display: flex or display: inline-flex on the same element.
• Accepts exactly three keyword values: nowrap, wrap, and wrap-reverse.
• The property is not inherited.
• Wrapping behavior depends on the main axis set by flex-direction.

💎 Property Values

nowrap vs wrap

With nowrap, four 100px items inside a 200px container stay on one row and overflow or shrink. With wrap, the same items break into two rows of two, keeping readable sizes without horizontal scrolling.

Examples Gallery

In this example, we’ll create a flex container with items that wrap onto multiple lines — plus nowrap comparison, wrap-reverse, and a responsive tag list.

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    border: 1px solid #000;
  }
  .item {
    width: 100px;
    height: 50px;
    background: lightblue;
    margin: 5px;
    text-align: center;
    line-height: 50px;
  }
</style>

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

.nowrap-row {
  display: flex;
  flex-wrap: nowrap; /* default */
}

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

.reverse-wrap {
  display: flex;
  flex-wrap: wrap-reverse;
  width: 200px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  padding: 0.35rem 0.75rem;
  background: #dbeafe;
  border-radius: 999px;
}

♿ Accessibility

• Keep logical DOM order — wrapping is visual; screen readers follow source order, not line breaks.
• Ensure wrapped items remain reachable with keyboard navigation on every viewport size.
• Do not rely on line position alone to communicate meaning or priority.
• Maintain enough spacing between wrapped items so touch targets do not overlap.
• Test with zoom and small screens to confirm wrapped content stays readable.

💡 Best Practices