Skip to content
Related Articles

Related Articles

Improve Article
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 arrow_drop_up
Recommended Articles
Page :