Question

使用css flex box模型有许多不同的属性。

以下属性有什么区别？

-webkit-flex: 1;
-moz-flex: 1;
-ms-box-flex: 1;
box-flex: 1;

和

-webkit-flex: 1;
-moz-box-flex: 1;
flex: 1;

如何结合旧语法和新语法？

Answer 1

box-flex是旧的flexbox规范：您可以指定一个“灵活”值而不是“增长”，“缩小”和“基础”因素值，就像您现在可以做的那样

      NEW             OLD
flex:1 1 auto; == box-flex:1;
flex:1 0 auto; == no equivalent

由于涉及许多规范，

弹性框可能看起来很混乱

每个规范之间的功能是不同的，因此最好在稍后的时刻定义回退;特别是如果您使用-grow -shrink -basis和-wrap等，则需要回退到完全不同的布局

如果您正在学习，我建议仅使用新的[近]标准语法http://dundalek.com/css3-flexbox-reference/

并在第二次添加对旧浏览器的支持（不一定全部）

仅限MSIE10和旧-webkit-语法（以旧Android手机为目标）; 恕我直言{/ 1}}语法不是必需的，恕我直言

是的，你需要旧的语法来支持android 2.避免使用flex-wrap，因为旧的浏览器不支持它们（实际上甚至新的firefox还不支持它），尝试始终使用flex：1 1汽车;因为其他值不可能使用旧语法... space-between和其他新的flexbox“goodies”在最旧的flexbox规范中不起作用（但可能在2011规范中有效），所以尽可能避免使用它们。基本上安全属性/值是

-moz-，其值为flex:

1 1 auto（盒子方向）

flex-direction:（盒装）

justify-content: flex-start | flex-end | center（框对齐）

CSS FlexBox模型：flex和box-flex之间的区别？

1 个答案: