5 伸缩项目伸缩

flex：

flex 属性用来控制伸缩容器额外空间如何沿着伸缩容器的布局轴成比例地分配给各个伸缩项目。 可以使伸缩目具有弹性， 从而改变它们的宽度或高度以填充可用的空间。 Flexbox 将可用空间分发给它的伸缩项目（与伸缩项目的正弹性成正比）， 或将它们缩小以防止溢出（ 与伸缩项目的负弹性成正比）。

-ms-flex: [ [ <positive-flex> <negative-flex>? ] || <preferred-size> ] | none

• <positive-flex>： 设置正弹性的整数。 如果忽略， 该伸缩项目的正弹性为 1。 负值无效。
• <negative-flex>： 设置负弹性的整数。 如果忽略， 该伸缩项目的负弹性为 0。 负值无效。
• <preferred-size>： 设置伸缩项目的首选大小。 可以为 width 或 height 属性的任何有效值， 包括 inherit。 如果忽略， 首选大小默认为 0px。 如果 < preferred- size> 组件在伸缩容器的伸缩项目上为 auto， 首选大小为该伸缩项目的 width 或 height 属性（ 平行于主轴的那个属性）。

例：

-ms-flex: 2;  /* 设置扩展比率2 */
-ms-flex: 1 2; /* 设置扩展比例1，收缩比率2 */
-ms-flex: 1 2 200px; /* 扩展比例1 收缩比率2 收缩基准值 200px*/
-ms-flex: none;  /* -ms-flex: 0 0 auto */