CSS propertyFlexbox
flex-wrap
Lets flex items wrap onto new lines when there isn’t enough room.
- Initial value
nowrap- Inherited
- No
- Animatable
- no
- Applies to
- flex containers
- JavaScript
element.style.flexWrap = "wrap"
Example
#CSS
.tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}Example HTML
<div class="tags stage">
<span class="box">HTML</span><span class="box">CSS</span><span class="box">JavaScript</span>
<span class="box">TypeScript</span><span class="box">React</span><span class="box">Python</span>
</div>Preview
Definition and usage
#By default, a flex container squeezes all its items onto a single line, even if that makes them very narrow. The flex-wrap property with the value wrap lets them move to the next line.
Wrapping is the foundation of responsive lists of cards, tags, and buttons: on a wide screen they fit in a single row, on a narrow one they arrange into several.
align-content, which positions entire lines relative to each other, only kicks in once there are multiple lines.
Syntax
#Syntax
flex-wrap: nowrap | wrap | wrap-reverse;Values
#- All items on a single line. They shrink or overflow the container.
- Items that don’t fit move to the next line.
- Wrapping upward: new lines appear above the previous ones.
Values in practice
#nowrap
All items on a single line. They shrink or overflow the container.
.demo { flex-wrap: nowrap; }wrap
Items that don’t fit move to the next line.
.demo { flex-wrap: wrap; }wrap-reverse
Wrapping upward: new lines appear above the previous ones.
.demo { flex-wrap: wrap-reverse; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- For wrapping lists, set
gaprather than margins. The spacing will stay even between lines too. - If you want equal columns no matter how many items there are, Grid with
repeat(auto-fill, minmax(…))does it better.
Related entries
#- flex-directionSets the direction of the main axis: flex items line up in a row or in a column.
- flex-flowA shorthand that combines flex-direction and flex-wrap in one declaration.
- align-contentPositions entire lines of items along a container’s cross axis.
- gapSets the spacing between items in a flex, grid, or multi-column container.
Spotted a mistake or missing an example? Write to us.