本文介绍下flex的用法和属性
这个一个自适应的3列盒子
<div class="flex">
<div style="background-color:red;">红色</div>
<div style="background-color:blue;">蓝色</div>
<div style="background-color:green;">绿色</div>
</div>
<style>
.flex{ display: flex;}
.flex div{border: 1px solid #000; flex:auto; height: 100px;}
</style>
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
flex主要带3个属性值
分别是flex-grow 规定项目将相对于其他灵活的项目进行扩展的量。
<div class="flex1">
<div style="background-color:red;">红色</div>
<div style="background-color:blue;">蓝色</div>
<div style="background-color:green;">绿色</div> </div>
<style>
.flex1{ display: flex; width:400px;}
.flex1 div{border: 1px solid #000; flex:auto; height: 200px;}
.flex1 div:nth-child(1){-webkit-flex:1 0 100px;flex:1 0 100px;}
.flex1 div:nth-child(2){-webkit-flex:2 0 100px;flex:2 0 100px;}
.flex1 div:nth-child(3){-webkit-flex:3 0 100px;flex:3 0 100px;}
</style>
如上面的例子，当父容器的宽度大于子元素的宽度和的时候触发
因为设置了flex-basis为100px
flex的宽度为400px，里面的3个dom的总长度设置为300px；那么多了100的剩余宽度。
第一个子元素的扩展量：(1/(1+2+3))*100，即约等于16px；
第二个子元素的扩展量：(2/(1+2+3))*100，即约等于32px；
第三个子元素的扩展量：(3/(1+2+3))*100，即约等于48px；
分别是flex-shrink 规定项目将相对于其他灵活的项目进行收缩的量。
<div class="flex2">
<div style="background-color:red;">红色</div>
<div style="background-color:blue;">蓝色</div>
<div style="background-color:green;">绿色</div> </div>
<style>
.flex2{ display: flex; width:400px;}
.flex2 div{border: 1px solid #000; flex:auto; height: 100px;}
.flex2 div:nth-child(1){-webkit-flex:0 1 200px;flex:0 1 200px;}
.flex2 div:nth-child(2){-webkit-flex:0 2 200px;flex:0 2 200px;}
.flex2 div:nth-child(3){-webkit-flex:0 3 200px;flex:0 3 200px;}
</style>
如上面的例子，当父容器的宽度小于子元素的宽度和的时候触发
因为设置了flex-basis为200px
flex的宽度为400px，里面的3个dom的总长度设置为600px；那么少了200px的剩余宽度。
因为设定过收缩的量所以需要200*1+200*2+200*3=1200；
所以第1个子容器的宽度为200-（200*1/1200）*200=166px
所以第2个子容器的宽度为200-（200*2/1200）*200=134px
所以第3个子容器的宽度为200-（200*3/1200）*200=100px
当「flex-basis」在「flex」属性中不为0时（包括值为auto，此时伸缩基准值等于自身内容宽度），「flex子项」将分配容器的剩余空间（剩余空间即等于容器宽度减去各项的伸缩基准值）
当「flex-basis」在「flex」属性中等于0时，「flex子项」将分配容器的所有空间（因为各项的伸缩基准值相加等于0，剩余空间等于容器宽度减去各项的伸缩基准值，即减0，最后剩余空间值等于容器宽度），所以可以借助此特性，给各子项定义「flex: n」来进行按比例均分容器总宽度
- 浅绿 = 支持
- 红色 = 不支持
- 粉色 = 部分支持
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0 |
| 11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit- | |
| 29.0+ | 9.0+ | 9.0+ | 28.0+ |