CSS CSS3 Flexbox: display: box vs. flexbox vs. flex
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16280040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Flexbox: display: box vs. flexbox vs. flex
提问by Michael Schmidt
Yesterday I got a website in the school which uses the CSS 3 flexbox statement. I never used that before. So I googled it a bit and found a lot of different styles of the flexbox statements.
昨天我在学校找到了一个使用 CSS 3 flexbox 语句的网站。我以前从未使用过。所以我用谷歌搜索了一下，发现了很多不同风格的 flexbox 语句。
Some guys write display: box;, some use display: flexbox;, and other display: flex;.
有些人写display: box;，有些人使用display: flexbox;，和其他display: flex;。
So what are the differences? Which I should use?
那么有什么区别呢？我应该使用哪个？
回答by Michael Schmidt
These are different styles.display: box;is a version of 2009.display: flexbox;is a version of 2011.display: flex;is the actual version.
这些是不同的风格。display: box;是2009display: flexbox;的版本。display: flex;是2011的版本。是实际版本。
Quote of Paul Irish
保罗爱尔兰语的名言
Warning: Flexbox has undergone some major revisions, so this article is out of date. In summary, the old standard (Flexbox 2009), which this article is based on, was implemented in Chrome since v4, Firefox since v2, and IE10 beta.
Since then, the new flexbox standard debutedand started to debut in Chrome 17. Stephan Hay has written a guide on the new flexbox implementation. Since then, the spec underwent naming changes which started landing in Chrome 21. Chrome 22 has a stable implementation of the latest spec.
At this point, implementing either has its risks, so be aware.
警告：Flexbox 经历了一些重大的修改，所以这篇文章已经过时了。总之，本文所基于的旧标准 (Flexbox 2009)已在 Chrome v4、Firefox v2 和 IE10 beta 中实现。
从那时起，新的 flexbox 标准首次亮相并开始在 Chrome 17 中亮相。 Stephan Hay写了一份关于新的 flexbox 实现的指南。从那时起，规范经历了命名更改，并开始登陆 Chrome 21。Chrome 22 稳定实现了最新规范。
在这一点上，实施两者都有其风险，所以要注意。
Hereis the blog about the different flexbox statements.
Thisis a blog entry by css-tricks about the different versions.
这是关于不同 flexbox 语句的博客。
这是 css-tricks 关于不同版本的博客条目。
When i use flexbox, i always write it like that:
当我使用 flexbox 时，我总是这样写：
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
Edit:
Still not everyone has a browser/device capable of viewing flexbox layouts. So for fallback solutions or alternatives there is this articleby Kenan Yusuf on how to use flexbox without using flexbox.
编辑：
仍然不是每个人都有能够查看 flexbox 布局的浏览器/设备。因此，对于后备解决方案或替代方案，Kenan Yusuf撰写的这篇文章介绍了如何在不使用 flexbox 的情况下使用 flexbox。
回答by andyb
The specification has been through many iterations, see 2009, 2012, 2013and each time the value was changed. display: flex;is the latest.
该规范已经经历了多次迭代，参见2009、2012、2013以及每次更改值。display: flex;是最新的。
It is still a draft specification so any current implementation may still change.
它仍然是规范草案，因此任何当前的实现都可能会发生变化。
回答by johnie
display: flex; Is latest and better version currently we can use that in our code.
显示：弹性；目前是最新更好的版本，我们可以在我们的代码中使用它。
So go for that.
所以去吧。
