[HTML_REMOVED]

[HTML_REMOVED]
[HTML_REMOVED]
[HTML_REMOVED]
[HTML_REMOVED]
[HTML_REMOVED]Document[HTML_REMOVED]
[HTML_REMOVED]
[HTML_REMOVED]
.container{
display: flex;
width: 50%;
height:500px;
background-color: lightblue;
margin:10px;
}
.container>div{
width:120px;
height:120px;
}
.container>div:nth-child(odd)
{
background-color: lightsalmon;
}
.container>div:nth-child(even){
background-color: lightgreen;
}
.container:nth-child(1){
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
}
.container:nth-child(2){
flex-direction: row-reverse;
flex-wrap: nowrap;
}
.container:nth-child(2)>div:nth-child(odd){
flex-grow: 3;
flex-shrink: 3;
}
.container:nth-child(2)>div:nth-child(even){
flex-grow:1;
flex-shrink:1;
}

[HTML_REMOVED]
[HTML_REMOVED]
[HTML_REMOVED]
[HTML_REMOVED]1[HTML_REMOVED]
[HTML_REMOVED]2[HTML_REMOVED]
[HTML_REMOVED]3[HTML_REMOVED]
[HTML_REMOVED]4[HTML_REMOVED]
[HTML_REMOVED]5[HTML_REMOVED]
[HTML_REMOVED]6[HTML_REMOVED]
[HTML_REMOVED]

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

[HTML_REMOVED]

[HTML_REMOVED]