<div class="contain">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="b"></div>
<!-- <div class="c"></div>
<div class="b"></div>
<div class="c"></div> -->
</div>
.contain{
background-color: #f55d5d;
height: 400px;
width: 600px;
display: flex;
flex-direction: row;
/* flex-direction: row-reverse; */
/* flex-direction:column; */
/* flex-direction:column-reverse; */
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
/* flex-flow: row || wrap; */
//justify-content定义了项目在主轴上的对齐方式。flex-start | flex-end | center | space-between | space-around;
/* justify-content: space-between; */
//align-items: flex-start | flex-end | center | baseline | stretch;
/* align-items: flex-start; */
}
.a{
margin-top: 10px;
margin-left: 10px;
order: 1;
background-color: #5da734;
height: 120px;
width: 100px;
}
.b{
margin-top: 10px;
margin-left: 10px;
order: 0;
background-color: #5234f4;
height: 140px;
width: 100px;
}
.c{
margin-top: 10px;
margin-left: 10px;
background-color: #5da7f5;
height: 150px;
width: 100px;
/* flex-grow: 0; */
flex-shrink:1;
align-self: flex-end;
}