为flexbox订购供应商前缀的正确方法是什么？

Question

摩擦

• CSS Tricks表示flexbox的display供应商前缀的顺序非常重要，并显示了一个排序（-webkit-box，-moz-box，-ms-flexbox，{{ 1}}，-webkit-flex）
• MDN显示的顺序与CSS技巧不同，并为flex（-moz-box，-moz-flex，-webkit-box，{{-webkit-flex换算-moz-flex 1}}，-ms-flexbox）
• Bourbon显示了不同的顺序并引入flex，其他两页甚至没有提及（box，-webkit-box，-moz-box ，box，-webkit-flex，-moz-flex，-ms-flexbox）

问题

• 订单真的很重要吗？
• 这样做的正确方法是什么？

Answer 1

只要W3C版本（官方财产）排在最后，就没有区别。

CSS渲染引擎将始终选择适用的最后一个属性。因此，如果实际支持flex，则您不希望Chrome跳过-webkit-flex并选择flex。

您在CSS-Tricks，MDN和Bourbon中看到供应商前缀排序的变化，因为订单并不重要。请注意它们的共同点：flex是最后一个。

以下是一些更多细节：

• Ordering CSS3 Properties
• Ordering of vendor-specific CSS declarations

Answer 2

大多数情况下，供应商前缀的顺序并不重要，但请确保您使用最标准化的版本，最后添加一个没有供应商前缀（只是flex）的版本。如果属性相等，CSS总是优先考虑最后一个。

无论如何，最常见的浏览器现在支持没有前缀的flex：http://caniuse.com/#feat=flexbox。 96％的浏览器可以使用flexbox，其中82％的浏览器支持flex而无需加前缀。

Answer 3

我正在添加一个新的正确答案。因为确实很重要，特别是对于flexbox。你指出的最后两个例子对于今天所需的最终语法并不是最新的，需要被丢弃。

像尼克拉斯所说的那样，你总是希望获得官方W3C标准的无标题属性。原因是CSS一个接一个地解析所有规则。相同（或类似）属性的最后一个规则将始终优先于前一个。然而，flexbox的情况很奇怪，因为有3种不同类型的规则和规范。

首先，忽略给定的MDN和Bourbon规则集，它们不是最新的。

MDN示例中的规则display: -moz-flex;遗憾地错了。 Firefox确实（并且确实）没有正式支持它。 Firefox官方仅支持-moz-box或flex。我将编辑该文章以更正-moz-box替换。

Bourbon的box引用不再准确。你不需要它。一些演示可能包括它的原因是官方的＆＃flex;＆＃39;标准财产在当时（2009年）成为box。 flex此时并不存在。 flex语法是2013年晚些时候的最终建议。

在IE10之间实施了-ms-flexbox中间2011-2012 draft spec。

因此，在正确给定的CSS Tricks顺序中，首先声明旧属性对于flex规则集非常重要。您可以找到规则集here, with additional explanations on full browser support。

可以以任何方式交换但没有太大影响的两个规则是-webkit-box和-moz-box。

请注意，Firefox和Edge必须为旧版属性或webkit前缀规则添加别名，以尝试解决网络上的各种bugs occuring due to inaccurate order和/或缺少的属性。

因此，在这个意义上，使用完整的current flexbox rule set非常重要。