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

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手机为目标); -moz-恕我直言,语法不是必需的

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

flex: 有价值的 1 1 auto

flex-direction: (盒定向)

justify-content: flex-start | flex-end | center (箱盒)

align-items: flex-start | flex-end | center | baseline | stretch (框对准)