How to make the flexible items display in reverse order, and wrap if necessary?

Last Updated : 10 Oct, 2021

The approach of this article is to make the flexible items display in reverse order, and wrap if necessary by using a flex-wrap property in CSS.

The property is set to wrap-reverse Value. 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>
        <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;
            } aa
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>How to make the flexible items 
          display in reverse order, and wrap
          if necessary usingHTML5?</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>