96

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

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

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

4

3 回答 3

169

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

保罗爱尔兰的名言

警告：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 的情况下使用 flexbox 的文章。

于 2013-04-29T13:38:58.483 回答
10

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

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

于 2013-04-29T13:42:17.340 回答
3

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

所以去吧。

于 2014-12-12T14:38:04.257 回答