flex

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

默认值：看各分拆属性

适用于：弹性盒模型子元素

继承性：无

none：

none关键字的计算值为: 0 0 auto

[ flex-grow ]：

定义弹性盒子元素的扩展比率。

[ flex-shrink ]：

定义弹性盒子元素的收缩比率。

[ flex-basis ]：

定义弹性盒子元素的默认基准值。

• 如果缩写flex:1, 则其计算值为：1 1 0
• 示例：如下情况每个元素的计算宽是多少

  HTML Code：

  <ul id="flex">
  	<li>a</li>
  	<li>b</li>
  	<li>c</li>
  </ul>

  CSS Code：

  #box{display:-webkit-flex;display:flex;width:800px;margin:0;padding:0;list-style:none;}
  #box3 li:nth-child(1){-webkit-flex:1 1 300px;flex:1 1 300px;background:#999;}
  #box3 li:nth-child(2){-webkit-flex:1 2 500px;flex:1 2 500px;background:#aaa;}
  #box3 li:nth-child(3){-webkit-flex:1 3 600px;flex:1 3 600px;background:#ccc;}

  上例中，定义了父容器宽（即主轴宽）为800px，由于子元素设置了伸缩基准值flex-basis，相加300+500+600=1400，那么子元素将会溢出1400-800=600px；
  由于同时设置了收缩因子，所以加权综合可得300*1+500*2+600*3=3100px；
  于是我们可以计算a,b,c将被移除的溢出量是多少：
  a被移除溢出量：300*1/3100*600=3/31，即约等于58px
  b被移除溢出量：500*2/3100*600=10/31，即约等于194px
  c被移除溢出量：600*3/3100*600=18/31，即约等于348px
  最后a,b,c的实际宽度分别为：300-58=242px, 500-194=306px, 600-348=252px

• 对应的脚本特性为flex。

• 浅绿 = 支持
• 红色 = 不支持
• 墨绿 = 部分支持