CSS3弹性盒子模型：display: box vs. flexbox vs. flex

Question

昨天我在学校得到一个网站，它使用了CSS 3 flexbox语句。我以前从未使用过这个。因此，我进行了一些谷歌搜索，并发现了许多不同风格的flexbox语句。

有些人写display: box;，有些人使用display：flexbox;，还有其他人使用display: flex;。

那么这些有什么区别？我应该用哪个？

- user1722486

---

弹性盒模型（Flexbox）是一种 CSS 布局方式，它使容器能够更有效地分配其子元素之间的空间以及对齐它们相对于容器和彼此的位置。这种布局技术可以轻松实现响应式设计和复杂的页面布局，而且现代浏览器都支持它。如果你想要更好地掌握弹性盒模型，推荐学习一下 flex 属性、flex-grow 属性、flex-shrink 属性和 flex-basis 属性。 - cimmanon

如果有更好的答案，那么哪一个问题被关闭并不重要。如果新的问题有更好的答案，那么旧的问题可以被关闭。我猜测，那个同时以“问题和答案”的形式发布的旧问题要么永远不会被采纳，要么OP会接受他们自己的答案。就像我说的那样，如果OP采纳了一个答案，我会在这里复制你的答案，并投票关闭旧问题，将其作为这个问题的副本。 - andyb

@andyb：对我来说，这里有更好的链接和解决方案...所以我认为，即使它是重复的，我的问题也不应该被关闭。 - user1722486

@andyb：啊！我不知道怎么错过了那个。我们马上会处理。谢谢。 - BoltClock

这个回答解决了你的问题吗？弹性盒模型 - display: flex, box, flexbox？ - BuZZ-dEE

Answer 1

这些是不同的样式。
display: box; 是 2009 版本的一种样式。
display: flexbox; 是 2011 版本的一种样式。
display: flex; 是现在的版本。

Paul Irish 的引用

警告：Flexbox 经历了一些重大修改，因此本文已经过时。简而言之，本文基于的旧标准（Flexbox 2009） 已在 Chrome v4、Firefox v2 和 IE10 beta 中实现。

此后，新的 flexbox 标准已经推出 并开始在 Chrome 17 中推广。Stephan Hay 写了一篇关于新的 flexbox 实现的指南。自那以后，规范经历了命名变更，这些变更开始在 Chrome 21 中落地。Chrome 22 具有最新规范的稳定实现。

目前，实现任何一种方法都存在风险，请注意。

这里有关于不同 flexbox 语句的博客。
这是 css-tricks 的一篇关于不同版本的博客文章。

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

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

编辑：
仍然有许多人的浏览器/设备无法查看flexbox布局。因此，为了备用解决方案或替代方案，可以参考肯南·尤素夫（Kenan Yusuf）的这篇文章，了解如何在不使用flexbox的情况下使用它。

- Michael Schmidt

---

声明的顺序似乎很重要。我正在处理一个只支持-webkit-box的旧Android Chrome，这个声明必须放在最后才能生效。有人也遇到过这种情况吗？ - ken

不，"-webkit-box"应该排在最前面。你的最后一个声明应该是最近的W3C标准或者是最新的。但是我建议在"-webkit-flex"之后使用"-ms-flexbox"，因为IE12/Edge支持"-webkit-flex"，但是你需要让IE使用它正确的"-ms-"前缀而不是"-webkit-"。这只是一个一般性的小细节，因为"display:flex;"在这里不受IE12影响。 - hexalys

Answer 2

该规范经历了多次迭代，参见2009，2012，2013，每次都更改了其值。 display:flex;是最新的。

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

- andyb

Answer 3

display: flex; 是目前最新和最好的版本，我们可以在代码中使用它。

所以建议使用它。

- johnie