CSS Flexbox 布局：旧版本（用于在旧浏览器上工作）答案

【问题标题】：CSS Flexbox layout: old version (for working on old browser)CSS Flexbox 布局：旧版本（用于在旧浏览器上工作）
【发布时间】：2014-09-26 20:57:30
【问题描述】：

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

我的问题：版本不一样吗？

display: webkit-box;

display: box;

我知道是旧语法版本，但哪个更旧？

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

【问题讨论】：

可能对你有帮助。 stackoverflow.com/questions/16595587/…
谢谢，但我没有找到我的问题的答案。哪个年纪大？

标签： css webview cross-browser flexbox android-browser

【解决方案1】：

为了回答您的问题，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)

【讨论】：

很好的解释！谢谢！

【解决方案2】：

正确答案是 -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+ */
}

【讨论】：