CSS Flexbox
Flex Wrap
The
flex-wrapproperty controls whether flex items should stay on a single line or wrap onto multiple lines when there is not enough space in the flex container.
By default, Flexbox tries to keep all items on one line. When many items are present or the container becomes smaller, items may overflow. The supporting concepts are explained in Flex Container and Flex Item Sizing.
The flex-wrap property helps create responsive layouts by allowing items to move to the next line automatically.
Syntax
Flex Wrap Syntax
css
.container {
display: flex;
flex-wrap: value;
}Flex Wrap Example
css
.container {
display: flex;
flex-wrap: wrap;
}This allows flex items to move onto the next line when necessary.
Attributes
| Value | Description | Example |
|---|---|---|
| nowrap | Default. All items stay on one line | flex-wrap: nowrap; |
| wrap | Items wrap onto the next line | flex-wrap: wrap; |
| wrap-reverse | Items wrap in reverse order | flex-wrap: wrap-reverse; |
Example
Flex Wrap Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>Flex Wrap Example</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 500px;
border: 2px solid black;
gap: 10px;
padding: 10px;
}
.item {
width: 120px;
padding: 20px;
text-align: center;
background-color: lightblue;
border: 1px solid #333;
}
</style>
</head>
<body>
<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 class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| flex-wrap | 29 | 12 | 28 | 9 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
nowrapis the default Flexbox behavior.wrapis commonly used in responsive layouts.wrap-reverseplaces wrapped rows in reverse order.- Often combined with
justify-content,align-items, andgap. - Helps prevent content overflow on smaller screens.
Visual Comparison
nowrap
text
Item1 Item2 Item3 Item4 Item5 Item6wrap
text
Item1 Item2 Item3
Item4 Item5 Item6wrap-reverse
text
Item4 Item5 Item6
Item1 Item2 Item3Conclusion
The flex-wrap property determines how flex items behave when space is limited. By allowing items to wrap onto multiple lines, it helps create flexible, responsive, and user-friendly layouts that adapt to different screen sizes.