<h2>Flexbox</h2>
    <div class="container">
        <div class="item" id="item1">First Box</div>
        <div class="item" id="item2">Second Box</div>
        <div class="item" id="item3">Third Box</div>
        <div class="item" id="item4">Fourth Box</div>
        <div class="item" id="item5">Fifth Box</div>
        <div class="item" id="item6">Sixth Box</div>
    </div>

.container{
            height: 600px;
            width: 100%;
            border: 2px solid #ea2929;
            display: flex;
            flex-direction: row;
            flex-direction: column;
            flex-direction: column-reverse;
            flex-direction: row-reverse; 
            flex-wrap: wrap;
            flex-flow: row wrap;

            justify-content: center;
            justify-content: space-between;
            justify-content: space-evenly;
            justify-content: space-around;
            align-items: center;
            align-items: flex-end;
            align-items: flex-start;
         }

        .item{
            background-color: rgb(189, 221, 4);
            border: 2px solid #000000;
            margin: 10px;
            padding: 10px;
            width: 150px;
            height: 150px;
        }

        #item1{
            order: 1;
            flex-grow: 3 ;
        }

        #item2{
            flex-grow: 2;
            align-self: flex-end;
            
        }

        #item3{
            flex-shrink:2;
            align-self: flex-end;
            align-self: center;
        }
        
        #item4{
            flex-shrink:1;
        }

        #item5{
            order: 2;
        }

        #item6{
            order: -1;
            flex: 2 2 420px;
        }
    </style>