CSS | flex-wrap property - GeeksforGeeks

24 Aug, 2021
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
Property Values:  
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:  
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:  
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:  
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:  
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:  
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:  
 
initial: This property is used to set it as default value. Syntax:  
flex-wrap: initial;
Example:  
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:  
Google Chrome 29.0, 21.0 -webkit-
Internet Explorer 11.0
Firefox 28.0, 18.0 -moz-
Opera 17.0
Safari 9.0, 6.0 -webkit-
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
shubham_singh
skyridetim
hritikbhatnagar2182
CSS-Properties
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?