CSS | flex-wrap property

Last Updated : 21 Nov, 2019

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;

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:

<!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:
flex-wrap 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:

<!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:
flex-wrap 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:

<!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:
flex wrap property

initial: This property is used to set it as default value.
Syntax:

flex-wrap: initial;

Example:

<!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:
flex wrap property

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-

My Personal Notes

Related Articles