CSS3 Flexbox：显示：box vs. flexbox vs. flex

昨天我在学校里有一个使用CSS 3 flexbox语句的网站。我以前从未用过。所以我用谷歌搜索了一下，发现了很多不同样式的flexbox语句。

有些人写display: box;，有些用display: flexbox;，还有一些display: flex;。

那有什么区别呢？我应该使用哪个？

css flexbox

— 彼得·莫滕森
source

精确重复： stackoverflow.com/questions/15662578/…–

— cimmanon

但是哪个首先会得到接受的答案...我会对您的投注@cimmanon进行套期，然后将您的答案同时发布给两个人！

— andyb 2013年

关闭哪个都没关系。如果较新的问题有更好的答案，则可以关闭较旧的问题。我推测，在同一时间发布为“问答”的较早的问题将永远不会被接受，或者OP将接受他们自己的回答。就像我说的，我会在这里重复您的答案，并投票决定关闭长者，作为此重复的副本，假设OP接受了答案:-)

— andyb 2013年

@andyb：对我来说，这里既有更好的链接，也有解决方案……所以，我认为，即使重复，我的问题也不应结束。

@andyb：啊！我以某种方式错过了。我们会尽快处理。谢谢。

— BoltClock

Answers:

150

这些是不同的风格。
display: box;是2009年
display: flexbox;的版本。
display: flex;是2011年的版本。是实际版本。

保罗·爱尔兰的名言

警告：Flexbox进行了一些重大修订，因此本文已过时。总而言之，本文所基于的旧标准（Flexbox 2009）在v4以来的Chrome，v2以后的Firefox和IE10 beta中实现。

从那时起，新的flexbox标准在Chrome 17中首次亮相，并开始在Chrome 17中首次亮相。Stephan Hay编写了有关新的flexbox实现的指南。从那时起，该规范进行了命名更改，该更改开始在Chrome 21中着陆。Chrome22稳定地实施了最新规范。

在这一点上，实施任何方法都有其风险，因此请注意。

这是有关不同的flexbox语句的博客。
这是css-tricks撰写的有关不同版本的博客条目。

当我使用flexbox时，我总是这样写：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

编辑：
仍然不是每个人都有能够查看弹性框布局的浏览器/设备。因此，对于后备解决方案或替代方案，Kenan Yusuf的这篇文章介绍了如何在不使用flexbox的情况下使用flexbox。

— 迈克尔·施密特（Michael Schmidt）
source

声明的顺序似乎很重要。我正在使用仅支持-webkit-box的旧版Android chrome，该声明必须排在最后才能生效。有人也经历过吗？

— 2014年

@Ken不，-webkit-box第一位。您的最后声明应该始终是最新的或W3C标准。但是我建议这样做-ms-flexbox，-webkit-flex因为IE12 / Edge支持-webkit-flex，但是从技术上讲，您希望IE使用其正确的-ms-前缀而不是-webkit-。尽管显示为nitpick，但通常要小心：flex; 不受IE12的影响。

— hexalys 2015年

该规范经过多次迭代，请参见2009，2012，2013年以及每次更改值时。display: flex;是最新的。

它仍然是规范草案，因此任何当前的实现可能仍会更改。

— 安迪
source

显示：flex; 是最新且更好的版本，目前我们可以在代码中使用它。

所以去吧。

— 约翰尼
source