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

问题描述

我知道CSS中有3个版本的FlexBox。
旧版，Tweener和新版：
根据：

我的问题：
这个版本是不同的吗？

  display：webkit-box; 
 
 display：box; 
  

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

解决方案

对于旧的浏览器兼容性（Android浏览器2.3）正确的答案是 -webkit-box 和 -moz-box 是2009年需要使用的两个句法。 display：box 不应使用w / o前缀，因为它从未被任何浏览器实现。

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

如上所述或。主容器（对于所有浏览器）的完全正确的语法是：

  .flex-container {
 display： -webkit-box; / * Safari 3.1-6，Chrome< 21（2009规格），UC浏览器Android * / 
显示：-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， 10，Chrome 21  -  28 * / 
 display：flex; / * Edge 12+，Firefox 28+，Blink，Safari 9+，Opera Mini 8+ * / 
} 
  

I understand that there is 3 version of FlexBox in CSS.Old, Tweener and New:according to: http://css-tricks.com/old-flexbox-and-new-flexbox/

My question:does that versions are different?

display: webkit-box;

display: box;

I know is the OLD syntax version but which one is older?

And for older browser compatibility (android browser 2.3) which one do I need to use?

解决方案

The correct answer is that -webkit-box and -moz-box are the two you need to use for the 2009 syntax. display: box w/o prefix should not be used, as it was never implemented by any browser.

A syntax with prefixes like -webkit-box is always the early implementation of a specs by a browser. The prefixed rule always comes first before the final standard.

As discussed here or here. The full proper syntax of the main container (for all browsers) is:

.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+ */
}

这篇关于CSS Flexbox布局：旧版本（用于在旧浏览器上工作）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！