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

问题描述

我成为昨天在学校使用css3 flexbox语句的网站。我从来没有使用过。所以我google一点。发现了很多不同样式的flexbox语句。

有些人写 display：box; ，有些使用显示： flexbox; 和其他 display：flex; 。

我应该使用哪个？

解决方案

这些是不同的样式。

display：box; 是2009年的版本。

display：flexbox; 是2011年的版本。

display：flex; 是实际版本。

$ b

Flexbox已经经历了一些重大修订，因此本文
已过期。总而言之，旧标准（Flexbox 2009），其中
此文章基于，自v4以来在Chrome中实现，Firefox
自v2和IE10测试版。

从此以后，新的flexbox标准首次亮相，并开始在
Chrome 17上亮相。Stephan Hay有撰写了关于新的flexbox
实现的指南。从那以后，该规范经历了命名变化，
开始在Chrome 21登陆。Chrome 22有一个稳定的实现
的最新规范。

这一点，实施有风险，请注意。

此处是有关不同flexbox语句的博客。

这是一个通过css-tricks介绍不同版本的博客条目。 p>

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

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

编辑：

仍然不是每个人都有浏览器/布局。因此，对于后备解决方案或备用方案，由Kenan Yusuf提供的本文将介绍如何使用flexbox而不使用flexbox 。

I became yesterday a website in the school which use the css3 flexbox statement. I never used that before. So i google it a bit. And found a lot of different styles of the flexbox statements.
Some guys write display: box;, some use display: flexbox; and other display: flex;.

So what are the differents? Which i should use?

解决方案

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.

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