CSS flex-wrap Property
The flex-wrap property in CSS asserts whether any flex item is forced onto one line or can wrap onto multiple lines. If wrapping is to be done, it sets the direction that the lines are stacked. The flex-wrap property is specified as a single keyword chosen among keywords such as nowrap, wrap, and wrap-reverse.
Syntax for flex-wrap property:
Following is the syntax for the flex-wrap property.
flex-wrap: nowrap|wrap|wrap-reverse|initial;
Example 1: CSS flex-wrap property
Here in the example below, we are using the flex-wrap property with different border styles, colors, and different values. In this case, we have given the flex-wrap property value as a wrap, nowrap, and wrap-reverse.
<!DOCTYPE html>
<html>
<head>
<title>The flex-wrap property in CSS</title>
<style type="text/css">
.content,
.content1,
.content2 {
color: #fff;
font: 100 24px/100px sans-serif;
height: 150px;
text-align: center;
}
.content div,
.content1 div,
.content2 div {
height: 50%;
width: 300px;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
.content {
display: flex;
flex-wrap: wrap;
}
.content1 {
display: flex;
flex-wrap: nowrap;
}
.content2 {
display: flex;
flex-wrap: wrap-reverse;
}
</style>
</head>
<body>
<h4>This is an example for flex-wrap:wrap </h4>
<div class="content">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap </h4>
<div class="content1">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</body>
</html>
Output:
Example 2: CSS flex-wrap property
Here in the example below, we are using the flex-wrap property with different border styles, colors, and different values. In this case, we have given the flex-wrap property value as nowrap. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>The flex-wrap property in CSS</title>
<style type="text/css">
.content,
.content1,
.content2 {
color: #fff;
font: 100 24px/100px sans-serif;
height: 150px;
text-align: center;
}
.content div,
.content1 div,
.content2 div {
height: 50%;
width: 300px;
}
.red {
background: pink;
}
.green {
background: deeppink;
}
.blue {
background: orange;
}
.content {
display: flex;
flex-wrap: nowrap;
}
.content1 {
display: flex;
flex-wrap: nowrap;
}
.content2 {
display: flex;
flex-wrap: nowrap;
}
</style>
</head>
<body>
<h4>This is an example for flex-wrap:nowrap </h4>
<div class="content">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap </h4>
<div class="content1">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
29 |
29 |
| Edge |
12 |
12 |
| Firefox |
28 |
28 |
| Internet Explorer |
11 |
11 |
| Opera |
17 |
17 |
| Safari |
9 |
9 |
| Webview Android |
4.4 |
4.4 |
| Chrome Android |
29 |
29 |
| Firefox Android |
52 |
52 |
| Opera Android |
18 |
18 |
| IOS Safari |
9 |
9 |
| Samsung Internet |
2.0 |
2.0 |
Conclusion
The initial value for the flex-wrap property is nowrap. This property is applicable to the flex containers. It is not an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
