display:flex详细思考

旧版浏览器，如IE11或更低版本，不支持或仅部分支持 Flexbox 。如果你想安全的使用页面正常呈现，你应该退回到其他的 CSS 布局方式，比如结合float的display: inline-block或者display: table等。针对移动端h5，flexbox值得一试。

---

容器属性

• flex-direction: [row | row-reverse | column | column-reverse]
  默认row，column使 flex 项垂直布局。也可以通过设置reverse反向操作

• flex-wrap: [nowrap | wrap | wrap-reverse] 定义如何换行，默认nowrap不换行

• flex-flow: [flex-direction flex-wrap]的简写形式，默认row nowrap

• justify-content: 水平方向对齐 [flex-start | flex-end | center | space-between | space-around | space-evenly]。

  • space-between两端对齐，项目之间的间隔都相等
  • space-around每个项目两侧的间隔相等
  • space-evenly flex容器起始边缘和第一个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等。以前浏览器不支持，chrome 也是 60 版本之后才支持。

• align-items: 垂直方向对齐 [flex-start | flex-end | center | baseline | stretch]

  • 项目的第一行文字的基线对齐
  • stretch如果项目未设置高度或设为auto，将占满整个容器的高度。

• align-content: [flex-start | flex-end | center | space-between | space-around | stretch]定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

---

项目属性

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

• flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

• flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。不可为负值。

• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

• flex：flex-grow, flex-shrink 和 flex-basis的简写，默认0 1 auto。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

• align-self：[auto | flex-start | flex-end | center | baseline | stretch] 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，效果同align-items。

---

使用心得

1. 一般情况，父元素添加display:flex，子元素配置flex:auto就可以了，假如固定，一行填不满时可以考虑改用flex-basis或者额外添加max-width加以限制。
2. 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1。
   flex:1 = flex: 1 1 0%
   flex:auto = flex: 1 1 auto
   flex:3 24px = flex:3 1 24px
3. basis 0%和auto的区别，举一个🌰

<div class="parent">
   <div class="item-1"></div>
   <div class="item-2"></div>
   <div class="item-3"></div>
</div>

<style type="text/css">
   .parent {
       display: flex;
       width: 600px;
   }
   .parent > div {
       height: 100px;
   }
   .item-1 {
       width: 140px;
       flex: 2 1 0%;
       background: blue;
   }
   .item-2 {
       width: 100px;
       flex: 2 1 auto;
       background: darkblue;
   }
   .item-3 {
       flex: 1 1 200px;
       background: lightblue;
   }
</style>

• 主轴上父容器总尺寸为 600px

• 子元素的总基准值是：0%（即为0）+ auto（对应其width100px）+ 200px = 300px
  故剩余空间为 600px - 300px = 300px
  伸缩放大系数之和为： 2 + 2 + 1 = 5
  剩余空间分配如下：

    .item-1 = 0% + 120px = 120px
    .item-2 = auto + 120px = 220px
    .item-3 = 200px + 60px = 260px

所以flex-basis的auto和0%是不同的，如果设置了width会影响到最后空间的分配。因此官方的建议也是在设置flex时尽量不添加width属性，通过flex:0 0 [width]可以达到相同的效果。

4. 借助autoprefixer兼容低版本使用-webkit-box，但在display:flex的行级子元素(例如p,span)需要添加display:block，否则不会生效。

---

参考

10分钟学会基本的 Flexbox 布局
flex设置成1和auto有什么区别