弹性盒：-webkit-box；-moz-box；-ms-flexbox； & -webkit-flex;这些是什么？答案

【问题标题】：Flexbox : -webkit-box;, -moz-box;, -ms-flexbox; & -webkit-flex; What are they?弹性盒：-webkit-box；-moz-box；-ms-flexbox； & -webkit-flex;这些是什么？
【发布时间】：2017-01-12 04:00:39
【问题描述】：

我正在尝试熟悉 CSS flexbox。有很多有用的资源。但是，当我遇到 -webkit-box;, -moz-box;, -ms-flexbox; 和 -webkit-flex; 时，我不确定这些是什么或如何处理它们。

如果有人能对此有所了解，我将不胜感激。

谢谢！

【问题讨论】：

stackoverflow.com/a/35137869/3597276

标签： css webkit flexbox

【解决方案1】：

这些是供应商首选项当您了解浏览器的工作功能时，您会更加清楚。实际上，所有浏览器都在其特定引擎上运行。无论我们编写什么 CSS 语法或功能，这些引擎都会在浏览器上呈现它们的行为。

网络套件

是 chrome safari 等使用的最流行的浏览器引擎。因此，这些供应商前缀用于告诉浏览器我们应该使用哪些 css 属性。

【讨论】：

【解决方案2】：

您可以阅读有关供应商前缀 here 的所有信息。

链接摘要：

浏览器供应商有时会为实验性或非标准 CSS 属性添加前缀，因此开发人员可以进行实验，但浏览器行为的更改不会在标准过程中破坏代码。开发人员应该等到浏览器行为标准化后才包含无前缀属性。

【讨论】：

我想我的下一个问题是什么时候使用供应商前缀？只要我正确使用供应商前缀，每个 CSS 属性的值是否相同？
如果我想执行justify-content: flex-end; 是否需要为其他供应商前缀执行它，例如：.flex-container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-justify-content: flex-end; -moz-box-justify-content: flex-end; -ms-flex-justify-content: flex-end; -webkit-flex-justify-content: flex-end; justify-content: flex-end; width: 400px; height: 250px; background-color: lightgrey; }？