Signup/Sign In
PUBLISHED ON: APRIL 14, 2021

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.



About the author:
I like to write content about technology, helping users to understand technical terms easily. I also write about Python, Java, and various other programming language. I have an experience of 3+ years in content creation.