SOURCE

console 命令行工具 X clear

                    
>
console
<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;
}