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

Posted 2023-03-05

【中文标题】CSS3 Flexbox：显示：box vs. flexbox vs. flex

【英文标题】：CSS3 Flexbox: display: box vs. flexbox vs. flex

【发布时间】：2013-04-23 04:50:12

【问题描述】：

昨天我在学校找到了一个使用 CSS 3 flexbox 语句的网站。我以前从未使用过。所以我google了一下，发现了很多不同风格的flexbox语句。

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

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

【问题讨论】：

完全重复：***.com/questions/15662578/…

但是哪一个会先得到一个被接受的答案...我会对冲你的赌注@cimmanon 并将你的答案发布给两者！

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

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

@andyb：啊！我不知何故错过了。我们很快就会看到它。谢谢。

【参考方案1】：

这些是不同的样式。display: box; 是 2009 版。display: flexbox; 是 2011 版。display: flex; 是实际版本。

保罗爱尔兰的名言

警告：Flexbox 已经经历了一些重大的修改，所以这篇文章 过时了。总之，old standard (Flexbox 2009)，它 本文基于，自 v4 以来在 Chrome 中实现，Firefox 从 v2 和 IE10 beta 开始。

从那时起，the new flexbox standard debuted又开始在 Chrome 17. Stephan Hay 拥有written a guide on the new flexbox implementation。从那时起，该规范经历了命名变化， 开始登陆 Chrome 21。Chrome 22 有稳定的实现 最新规格。

此时，实现has its risks，所以请注意。

Here 是关于不同 flexbox 语句的博客。This 是 css-tricks 关于不同版本的博客条目。

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

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

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

【讨论】：

声明的顺序似乎很重要。我正在研究仅支持-webkit-box的旧android chrome，此声明必须最后才能生效。有人也经历过吗？

@Ken 不，-webkit-box 是第一位的。您的最后声明应始终是最新的或 W3C 标准。但是我会在-webkit-flex 之后推荐-ms-flexbox，因为IE12/Edge 支持-webkit-flex，但从技术上讲，您希望IE 使用其正确的-ms- 前缀而不是-webkit-。尽管作为 display: flex; ，这是一个普遍的谨慎挑剔；此处不受 IE12 影响。

【参考方案2】：

该规范已经过多次迭代，请参阅2009、2012、2013，并且每次更改值。 display: flex; 是最新的。

它仍然是一个草案规范，因此任何当前的实现都可能会发生变化。

【参考方案3】：

显示：弹性； 是目前我们可以在代码中使用的最新更好的版本。

那就去吧。