CSS FlexBox模型：Flex和Box之间的区别
使用CSS弹性框模型有许多不同的属性。
以下属性有何区别？
-webkit-flex: 1;
-moz-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
和
-webkit-flex: 1;
-moz-box-flex: 1;
flex: 1;
我如何结合旧的和新的语法？
box-flex是旧的Flexbox规范：您可以指定一个单一的“灵活性”值，而不是现在可以做的“增长”，“缩小”和“基础”因素值
NEW OLD
flex:1 1 auto; == box-flex:1;
flex:1 0 auto; == no equivalent
flex box可能看起来很混乱，因为涉及到很多规范
每个规范的功能不同，因此最好在稍后的时刻定义回退; 特别是如果你使用-grow -shrink -basis和-wrap等，你将需要回-wrap一个完全不同的布局
如果你正在学习，我建议只使用新的[几乎]标准语法http://dundalek.com/css3-flexbox-reference/
并在第二次添加支持旧浏览器（不一定全部）
只有MSIE10和旧的-webkit-语法（针对旧的Android手机）; -moz-语法不是必需的，恕我直言
是的，你需要老的语法来支持android 2.避免使用flex-wrap，因为旧的浏览器不支持它们（实际上即使是新的firefox也不支持它），试着总是使用flex：1 1 auto; 因为旧语法不可能使用其他值...空间之间和其他新Flexbox“好东西”不适用于最早的Flexbox规范（但可以在2011规范中运行），所以如果可能，请避免使用它们。 基本上是安全的属性/值
flex:值为1 1 auto
flex-direction: ）
justify-content: flex-start | flex-end | center justify-content: flex-start | flex-end | center （盒装）
align-items: flex-start | flex-end | center | baseline | stretch align-items: flex-start | flex-end | center | baseline | stretch （方块对齐）