最详细Flex布局(三)，外加每个属性的案例

作用于flex items(子盒子)的css属性
先设置一个父盒子和三个子盒子
css:

.container{width:400px;height:400px;background:red;display: flex;}
.item1{width:100px;height:50px;background:orange}
.item2{width:100px;height:150px;background:yellow}
.item3{width:100px;height:100px;background:blue}

html

<div class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>

一.order:决定了flex items的排布顺序

• 可以设置任意整数(正整数，负整数，0)，值越小就越排在前面

• 默认值是0

   //在之前属性上加
  .item1{order: 5;}
  .item2{order: 3;}
  .item3{order: 4;}
  

二.align-self:子盒子可以通过align-self覆盖父盒子设置的align-items

• auto(默认值):遵从父盒子的align-items设置

• stretch,flex-start,flex-end,center,baseline,效果和align-items一致

   //在之前属性上加
   .container{align-items:center}
   .item3{align-self: flex-end;}
  

三.flex-grow:决定了子盒子如何扩展

• 可以设置任意非负数字，默认值为0
• 当父盒子在主轴方向有剩余的size时候，flex-grow才会生效

如果所有子盒子的flew-grow总和超过1，每个子盒子的扩展size为

• 父盒子剩余的size*flex-grow/总数

如果所有子盒子的flex-grow总和不超过1，每个子盒子的扩展size为

• 父盒子的剩余size*flex-grow

• 子盒子扩展后的最终size不能超过父盒子的最大宽度

  //在之前属性上加
  .item1{flex-grow: 5;}
  .item1{flex-grow: 3;}
  .item1{flex-grow: 1;}
  

      //在之前属性上加
   .item1{flex-grow: 0.2;}
   .item1{flex-grow: 0.2;}
   .item1{flex-grow: 0.5;}