CSS | flex-wrap property

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 single line or multi-line format to flex items inside the flex container.

Syntax:

flex-wrap: nowrap|wrap|wrap-reverse|initial;

Values of flex-wrap property:



  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE 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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE 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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE 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>                    

    chevron_right

    
    

    Output:
    flex wrap property

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

    flex-wrap: initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE 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>                    

    chevron_right

    
    

    Output:
    flex wrap property



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.