Question

据我所知，CSS中有3个版本的FlexBox。 旧，Tweener和新：根据：http://css-tricks.com/old-flexbox-and-new-flexbox/

我的问题：这些版本有什么不同吗？

display: webkit-box;

display: box;

我知道OLD语法版本，但哪个版本较旧？

对于较旧的浏览器兼容性（android浏览器2.3）我需要使用哪一个？

Answer 1

正确的答案是-webkit-box和-moz-box是您需要用于2009语法的两个。不应使用display: box w / o前缀，因为它从未被任何浏览器实现。

带有-webkit-box前缀的语法始终是浏览器规范的早期实现。前缀规则总是在最终标准之前出现。

正如here或here所述。主容器（适用于所有浏览器）的完整正确语法是：

.flex-container {
  display: -webkit-box;  /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UC Browser Android */
  display: -moz-box;     /* Firefox 2 - 27 (2009 Spec), UC Mini */
  display: -ms-flexbox;  /* IE10 (2012 Syntax) */
  display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
  display: flex;         /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
}

Answer 2

要回答您的问题，display:webkit-box和display: box版本基本相同（Flexbox版本1）。只是不同的浏览器首先使用前缀（-webkit，-moz等）开始实现新的属性，然后在没有前缀的情况下开始支持。我从技术上讲你可以说-webkit-box比较早，因为这是浏览器首先支持的，但它与Flexbox版本1相同。

要涵盖所有浏览器版本，请列出该属性的所有浏览器前缀，然后最终不带前缀。因此，对于此版本的Flexbox，它将是：

display: -moz-box; //Firefox
display: -ms-box; //IE (in theory only, wasn't implemented. Not for use) 
display: -webkit-box; //Safari, Chrome
display: box; //W3C offical spec (in theory only, wasn't implemented. Not for use)

CSS Flexbox布局：旧版本（适用于旧浏览器）

2 个答案: