供应商前缀根本不适用于 flexbox 吗？答案

【问题标题】：Do vendor prefixes not work at all with flexbox?供应商前缀根本不适用于 flexbox 吗？
【发布时间】：2016-02-29 12:51:43
【问题描述】：

查看有关该主题的先前问题，我了解到供应商前缀在涉及 flexbox 时实际上是多余的。那么，我认识的相当多的设计师是如何使用 flexbox 的。由于在这个阶段我无法重组我的项目，我怎样才能让所有浏览器都能理解 flexbox？

【问题讨论】：

他们工作。尽管请记住，存在旧版本的语法 - 您可以在 caniuse.com/#search=flexbox 找到所需的所有信息
另外，阅读这些文章：“Old” Flexbox and “New” Flexbox, Using Flexbox

标签： css flexbox vendor-prefix

【解决方案1】：

谈到vendor prefixes，您需要了解浏览器兼容性。

某些浏览器需要前缀才能使 flexbox 工作（例如 IE 10 和 Safari 8），而其他浏览器则根本不需要前缀（例如当前的 Chrome 和 Firefox）。

一些（较旧的）浏览器根本不支持 flexbox（例如 IE 8 和 9），因此无论多多的前缀都无济于事。

Mozilla Developer Network 上的所有 flex 属性定义在底部都有一个显示浏览器兼容性的部分。您将能够看到每个属性的浏览器支持级别。

您也可以在caniuse.com 上查看浏览器支持。

更全面的flexbox浏览器支持分析见：

Flexbox code working on all browsers except Safari. Why?

【讨论】：

【解决方案2】：

只要确保你把东西放在正确的顺序。为了获得最大的兼容性，请尝试：

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;

【讨论】：