CSS flex-wrap property
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 allows enabling 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
1. Using CSS flex-wrap: wrap Property
wrap: 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.
<!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
nowrap: 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.
<!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
wrap-reverse: 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.
<!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
initial: 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.
<!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:
- Google Chrome 29.0 and above
- Edge 12 and above
- Internet Explorer 11.0 and above
- Firefox 28.0 and above
- Opera 17.0 and above
- Safari 9.0 and above
CSS flex-wrap Property – FAQs
What does the flex-wrap property do in CSS?
The flex-wrap property in CSS controls whether the flex container’s items should wrap onto multiple lines if they don’t fit in a single row or column. It determines how items are displayed when they exceed the container’s space.
What values can flex-wrap accept?
The flex-wrap property accepts three values: nowrap, wrap, and wrap-reverse. “Nowrap” forces items to stay on one line, “wrap” allows items to flow onto multiple lines, and “wrap-reverse” wraps items onto multiple lines in reverse order.
How does flex-wrap: wrap affect the layout?
When using flex-wrap: wrap, the flex items will automatically move to the next line if they don’t fit in the current line. This is especially useful for responsive layouts, where content should adjust fluidly to varying screen sizes.
What happens with flex-wrap: nowrap?
With flex-wrap: nowrap, all flex items are forced to stay on a single line, even if they overflow the container. This can lead to horizontal scrolling or content being cut off.
Can I control the order of wrapped items?
Yes, using flex-wrap: wrap-reverse, you can control the order of wrapped items, causing them to wrap in the opposite direction, placing the last items at the top and the first items at the bottom.
