CSS3 Flexbox: display: box vs. flexbox vs. flex [英] CSS3 Flexbox: display: box vs. flexbox vs. flex

问题描述

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

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.

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

Some guys write display: box;, some use display: flexbox;, and other display: flex;.

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

So what are the differences? Which I should use?

推荐答案

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

These are different styles.
display: box; is a version of 2009.
display: flexbox; is a version of 2011.
display: flex; is the actual version.

保罗爱尔兰语

警告:Flexbox 经历了一些重大的修改，所以这篇文章已过期.总之，旧标准 (Flexbox 2009)，本文基于，自 v4 起在 Chrome、Firefox 中实现从 v2 和 IE10 测试版开始.

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.

从那时起，新的 flexbox 标准首次亮相并开始在Chrome 17. Stephan Hay 已经编写了关于新 flexbox 的指南实施.从那时起，规范经历了命名更改开始登陆Chrome 21.Chrome 22已经稳定实现最新规格.

Since then, the new flexbox standard debuted and 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 语句的博客.
此是 css-tricks 关于不同版本的博客条目.

Here is the blog about the different flexbox statements.
This is a blog entry by css-tricks about the different versions.

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

When i use flexbox, i always write it like that:

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

仍然不是每个人都有能够查看 flexbox 布局的浏览器/设备.因此，对于后备解决方案或替代方案，Kenan Yusuf 撰写的这篇文章介绍了如何使用flexbox而不使用flexbox.

这篇关于CSS3 Flexbox: display: box vs. flexbox vs. flex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！