<h2>flex-wrap: nowrap;</h2>
<div class="container nowrap">
<div class="box">01</div>
<div class="box">02</div>
<div class="box">03</div>
<div class="box">04</div>
<div class="box">05</div>
<div class="box">06</div>
</div>
<h2>flex-wrap: wrap;</h2>
<div class="container wrap">
<div class="box">01</div>
<div class="box">02</div>
<div class="box">03</div>
<div class="box">04</div>
<div class="box">05</div>
<div class="box">06</div>
</div>
<h2>flex-wrap: wrap-reverse;</h2>
<div class="container wrap-reverse">
<div class="box">01</div>
<div class="box">02</div>
<div class="box">03</div>
<div class="box">04</div>
<div class="box">05</div>
<div class="box">06</div>
</div>
.container{
width: 360px;
display: flex;
flex-direction:row;
margin-right: 10px;
background-color: #eee;
margin-bottom: 80px;
}
.nowrap{flex-wrap: nowrap;}
.wrap{flex-wrap: wrap;}
.wrap-reverse{flex-wrap: wrap-reverse;}
.box{
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
font-weight: bold;
line-height: 100px;
}
.box:nth-child(1){background-color: gold;}
.box:nth-child(2){background-color: pink;}
.box:nth-child(3){background-color: skyblue;}
.box:nth-child(4){background-color: lightgreen;}
.box:nth-child(5){background-color: salmon;}
.box:nth-child(6){background-color: mediumpurple;}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.