CSS3 Flexbox: display: box vs

昨天我在学校得到了一个网站，它使用了 CSS3的弹性框声明。我以前从没用过。所以我用谷歌搜索了一下，发现了很多不同风格的 Flexbox 语句。

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

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

91298 次浏览
小开
最佳答案

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

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 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.

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

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

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 article by Kenan Yusuf on how to use flexbox without using flexbox.

小开

The specification has been through many iterations, see 2009, 2012, 2013 and each time the value was changed. display: flex; is the latest.

It is still a draft specification so any current implementation may still change.

小开

display: flex; Is latest and better version currently we can use that in our code.

So go for that.


提交答案