The CSS flex-wrap property is used to specify whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property enables the control direction in which lines are stacked. It is used to designate a single-line or multi-line format to flex items inside the flex container.
Syntax
flex-wrap: nowrap | wrap | wrap-reverse | initial;
Default Value: nowrap
Property Value
| Value | Description |
|---|
nowrap | Keeps all flex items on a single line, even if they exceed the container's width, potentially causing overflow. |
wrap | Allows flex items to wrap onto multiple lines based on their width, creating a more flexible, responsive layout. |
wrap-reverse | Similar to wrap, but stacks the lines in reverse order, with the last line at the top and the first line at the bottom. |
initial | Resets the property to its default value, which is equivalent to nowrap. |
CSS flex-wrap Property Examples
Here are the examples demonstrating how each value of the flex-wrap property works, one by one:
1. Using CSS flex-wrap: wrap Property
This property is used to break the flex item into multiples lines. It makes flex items wrap to multiple lines according to flex item width.
Syntax:
flex-wrap : wrap;
Example: In this example, we are using the CSS flex wrap property.
html
<!DOCTYPE html>
<html>
<head>
<title>flex-wrap property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 5px solid black;
display: flex;
flex-wrap: wrap;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
}
h3 {
margin-top:-20px;
margin-left:50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-wrap:wrap property</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
Output:
2. Using CSS flex-wrap: nowrap Property
The default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrap in single lines.
Syntax:
flex-wrap: nowrap;
Example: In this example, we are using the CSS flex wrap property.
html
<!DOCTYPE html>
<html>
<head>
<title>flex-wrap property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 5px solid black;
display: flex;
flex-wrap: nowrap;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
}
h3 {
margin-top:-20px;
margin-left:50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-wrap:nowrap property</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
Output:
3. Using CSS flex-wrap: wrap-reverse Property
This property is used to reverse the flow of the flex items when they wrap to new lines.
Syntax:
flex-wrap: wrap-reverse;
Example: In this example, we are using the CSS flex wrap property.
html
<!DOCTYPE html>
<html>
<head>
<title>flex-wrap property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 5px solid black;
display: flex;
flex-wrap: wrap-reverse;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
}
h3 {
margin-top:-20px;
margin-left:50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-wrap:wrap-reverse property</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
Output:
4. Using CSS flex-wrap: initial Property
This property is used to set it as default value.
Syntax:
flex-wrap: initial;
Example: In this example, we are using the CSS flex wrap property.
html
<!DOCTYPE html>
<html>
<head>
<title>flex-wrap property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 5px solid black;
display: flex;
flex-wrap: initial;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
}
h3 {
margin-top:-20px;
margin-left:50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-wrap:initial property</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
Output:
Supported Browsers
The browsers supported by CSS flex-wrap property are listed below:
Note: Ensure that you test your layout across different browsers, especially older versions, as flex-wrap may behave differently in some cases (such as Internet Explorer), where layout quirks can occur.