flex弹性布局总结

属性值说明

• flex-start：左对齐（主轴 || 交叉轴）
• flex-end：右对齐（主轴 || 交叉轴）
• center：居中（主轴 || 交叉轴）
• space-between：两端对齐，项目间间隔相同
• space-around：每个项目两侧间隔相同
• baseline：与主轴的第一行文字为基准对齐

容器的属性

• flex-direction：决定主轴方向

  4个可能值： row(默认值) | row-reverse | column | column-reverse
  

  
  row 和 row-reverse
  
  column 和 column-reverse

• flex-wrap:如果一条轴线装不下，项目如何换行

  3个可能值：nowrap(默认值) | wrap | wrap-reverse
  

  
  nowrap
  
  wrap 和 wrap-reverse

• flex-flow:是flex-direction 和 flex-wrap的简写形式，默认值是row，nowrap。

  范例：

flex-flow:flex-direction || flex-wrap;

• justify-content:定义主轴的对齐方式

  6个可能值：flex-start(默认值) | flex-end | center | stretch(如若item没定义高度) | space-between | space-around
  

  
  flex-start 和 flex-end
  
  center 和 stretch
  
  space-between 和 space-around

• align-items：定义交叉轴的对齐方式

  5个可能值：flex-start | flex-end | center | stretch | baseline
  

  
  flex-start 和 flex-end
  
  center 和 stretch
  
  baseline

• align-content：多根轴线的对齐方式，如若只有一根，则该样式不起作用

  6个可能值：flex-start(默认值) | flex-end | center | stretch | space-between | space-around
  

  
  flex-start 和 flex-end
  
  center 和 stretch
  
  space-between 和 space-around

项目的属性

• order：定义项目的排列顺序，数字越小(可为负值)，排列越靠前，默认值为0。

.item1{
  height:50px;
  order:1;
}
.item2{
  height:70px;
}
.item3{
  height:90px; 
  order:2; 
}

order项目排序

• flex-grow：定义项目的放大比例，默认值为0。
  flex-grow放大比例的计算方法：若子项目的宽度总和超出父元素的，则该样式不起作用
  1、若放大比例的sum大于1，则 item的现宽度 = 空间剩余部分*（各部分放大比例 / sum）+ 项目的原始宽度；
  2、若放大比例的sum小于1，则 item的现宽度空 = 空间剩余部分*各部分放大比例 + 项目的原始宽度；
  3、flex-grow会受max-width影响，若flex-grow后的结果大于max-width，那么max-width将优先使用；
  ，有可能导致有空间未分配。
  

  
  flex-grow值均为1 和 item1的flex-grow的值为2

• flex-shrink：定义项目缩小的比例，默认值为1。
  flex-shrink缩小比例的计算方法：若子项目的宽度总和不超出父元素的，则该样式不起作用
  范例：
  父元素的宽度为400，A项目的宽度为200px，B项目的宽度为300px，则子项目的宽度超出了父元素的400-（200+300）=-100px
  1、若A项目的flex-shrink为0，B项目的flex-shrink为1，则A项目宽度不变，则B项目的宽度为300px-100px=200px；
  2、若A项目的flex-shrink为1，B项目的flex-shrink为2，则A项目的现有宽度为200-100*（（200*1）/（200*1+300*2））= 175px，B项目的现有宽度为300-100*（（300*2）/（200*1+300*2））= 225；
  3、若A项目的flex-shrink为0.1，B项目的flex-shrink为0.2，则俩项目收缩的总和不是超出的100px，而是100*（0.1+0.2）=30px,则A项目的现有宽度为200-30*（（200*0.1）/（200*0.1+300*0.2））= 192.5px，B项目的现有宽度为300-30*（（300*0.2）/（200*0.1+300*0.2））= 277.5；
  

  
  flex-shrink项目1和项目2缩小的比例分别为0.1和0.2

• flex-basis：定义了在分配多余空间之前，项目占据主轴的空间，默认值为auto，即项目本身大小
  2个可能值：auto | length

.item1{
  height:50px;
  flex-basis:180px;
  width:70px;//若设置了flex-basis，则元素宽度将失效
}

flex-basis

• flex：是flex-grow、flex-shrink 和flex-basis的缩写形式，默认值为 0 1 auto，后两个属性可选
  注：优选使用这个属性，而不是单独使用各个属性，因为浏览器会推算相关值

• align-self：允许单个项目与其它项目的对齐方式不一致，可覆盖align-items属性，默认值为auto
  6个可能值：auto | flex-start | flex-end | center | baseline | stretch
  

  
  align-self的 flex-end