CSS flex-wrap Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS flex-wrap property wrapping flex items onto multiple lines inside a narrow container
Definition

Definition and Usage

The flex-wrap property sets whether flex items stay on one line or can move onto extra lines when they no longer fit in the flex container.

Set it on the flex container (display: flex). Pair it with flex-direction, or use the flex-flow shorthand for both.

Baseline · Widely available.

Not deprecated. Classic values nowrap, wrap, and wrap-reverse are widely supported. The newer balance keyword has limited support — treat it as optional for now.

Syntax

CSS Syntax

syntax.css
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

The initial value is nowrap. The property is not inherited. It applies only to flex containers.

Values

Property Values

ValueDescriptionTry it
nowrapOne line only (default). Items may overflowTry it
wrapItems can move to new lines in the normal cross directionTry it
wrap-reverseSame as wrap, but lines stack in reverse cross orderTry it
Narrow containerSee wrap kick in when the row is too shortTry it
initialResets to nowrapTry it
inheritUses the parent’s flex-wrap valueTry it
Approach

How to Use flex-wrap

Make a flex container, give items a size that can overflow, then choose wrap or nowrap.

  1. Set display: flex on the parent.
  2. Give the container a limited width (or let the viewport be narrow).
  3. Size the items so they do not all fit on one line (fixed widths help).
  4. Add flex-wrap: wrap (or wrap-reverse) when you want extra lines instead of overflow.
PieceRequired?Role
display: flexYesCreates the flex container
Limited main sizeYes (to see wrapping)A short row forces the choice between overflow and wrap
Item sizesHelpfulFixed widths make wrap vs nowrap obvious
flex-wrapYesnowrap, wrap, or wrap-reverse
Try it

Live Preview

Six fixed-width items sit in a narrow flex row. Change only flex-wrap.

nowrap may overflow sideways. wrap and wrap-reverse create extra lines.

Box

flex-wrap: wrap

Code

CSS Examples

Each snippet focuses on flex-wrap. Item widths are only there so wrapping is easy to see. Use Try It Yourself for a live editor.

Example 1 — One Line (nowrap)

Items stay on a single line and may overflow the box.

CSS
<style>
  .box {
    display: flex;
    flex-wrap: nowrap;
    width: 220px;
    border: 1px solid #94a3b8;
  }
  .box div {
    width: 70px;
    padding: 8px;
    background: #93c5fd;
    text-align: center;
  }
</style>

<div class="box">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>
Try It Yourself

How It Works

  1. Create a flex row. display: flex lays items along the main axis.
  2. Keep one line. flex-wrap: nowrap is the default behavior.
  3. Limit the container. A 220px box cannot fit six 70px items.
  4. Overflow appears. Extra items spill past the right edge instead of dropping down.

Example 2 — Multi-Line (wrap)

Items that do not fit move to the next line.

CSS
<style>
  .box {
    display: flex;
    flex-wrap: wrap;
    width: 220px;
    border: 1px solid #94a3b8;
  }
  .box div {
    width: 70px;
    padding: 8px;
    background: #93c5fd;
    text-align: center;
  }
</style>

<div class="box">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>
Try It Yourself

How It Works

  1. Same narrow box. Width and item sizes stay unchanged.
  2. Allow wrapping. flex-wrap: wrap permits extra flex lines.
  3. Fill then break. Items fill the first line, then continue on the next.
  4. No sideways overflow. The container grows taller instead of wider.

Example 3 — Reverse Line Order

Wrap, but stack lines from the opposite cross-start edge.

CSS
<style>
  .box {
    display: flex;
    flex-wrap: wrap-reverse;
    width: 220px;
    border: 1px solid #94a3b8;
  }
  .box div {
    width: 70px;
    padding: 8px;
    background: #93c5fd;
    text-align: center;
  }
</style>

<div class="box">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>
Try It Yourself

How It Works

  1. Still a wrapping row. Items can use more than one line.
  2. Flip the cross axis. wrap-reverse reverses where new lines start.
  3. First line sits lower. In a default row, the first filled line appears toward the bottom.
  4. Same item order on each line. Only the stacking of lines is reversed.

Edge Cases & Pitfalls

If wrapping seems broken, check these first.

container

Set it on the flex container

flex-wrap on a child does nothing useful. The parent needs display: flex.

space

No squeeze, no wrap

If the row is wide enough for every item, wrap and nowrap look the same. Narrow the container to see the difference.

align

align-content needs multiple lines

align-content only distributes flex lines when wrapping creates more than one line and spare cross-axis space exists.

shrink

Items may shrink instead of wrap

With nowrap, flex-shrink can squeeze items to fit. Fixed widths (or flex-shrink: 0) make overflow clearer for demos.

balance

balance is newer

Even line filling with flex-wrap: wrap balance is not widely supported yet. Stick to wrap / wrap-reverse for production today.

Compatibility

Browser Support

flex-wrap is a browser CSS property for Flexbox containers. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

flex-wrap

nowrap / wrap / wrap-reverse: Chrome 29+, Firefox 28+, Safari 9+, Edge 12+. Internet Explorer 11 supports flex-wrap. The balance keyword is newer and limited.

97% Classic value support
Google Chrome 29+
Full support
Mozilla Firefox 28+
Full support
Apple Safari 9+
Full support
Microsoft Edge 12+
Full support
Opera 17+
Full support
Samsung Internet 2+
Full support
Internet Explorer 11
Full support (classic values)
flex-wrap (nowrap / wrap / wrap-reverse) Widely supported

Bottom line: Safe for modern and IE11 flex layouts with nowrap, wrap, and wrap-reverse. Avoid relying on balance until support is broader. It is not a runtime API.

Remember

Key Takeaways

  • Role: one line vs multiple lines for flex items.
  • Default: nowrap — overflow instead of new lines.
  • Common fix: flex-wrap: wrap for responsive rows of cards or chips.
  • Container only: not inherited; set on display: flex.

One line: narrow flex row + flex-wrap: wrap; = items drop to the next line instead of overflowing.

Frequently Asked Questions

It controls whether flex items stay on one line or wrap onto extra lines when they do not fit in the flex container along the main axis.
The initial value is nowrap. All items stay on one line and may overflow the container.
Both allow multiple lines. wrap stacks new lines in the normal cross-axis direction. wrap-reverse stacks lines in the opposite cross-axis direction.
Set it on the flex container — the element with display: flex or display: inline-flex — not on each item.
align-content positions multiple flex lines when there is spare cross-axis space. It only matters when flex-wrap allows more than one line.
It is Baseline Widely available. Chrome 29+, Firefox 28+, Safari 9+, and Edge 12+ support the classic values. Internet Explorer 11 supports flex-wrap with the standard name. It is a browser CSS property, not a Node.js feature.

Next: float

Pull an element left or right so content wraps around it.

float tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

16 people found this page helpful

CSS flex-shrink Property CSS float Property