[英]Flexible box model - display : flex, box, flexbox?
Many of us are aware today that the older values of the display
property like inline
and block
are outdated after the new flexible box model has been introduced in CSS3. 今天我们很多人都知道,在CSS3中引入了新的灵活盒模型之后,
inline
和block
等display
属性的旧值已经过时了。 But, we might find different information on the web in the same flexible box model. 但是,我们可能会在同一个灵活的盒子模型中找到网络上的不同信息。
We might find mainly 3 different values of the display
property namely flex
, box
and flexbox
. 我们可能会发现
display
属性的3个不同值,即flex
, box
和flexbox
。 What is the difference between these three flexible box models and which one to use? 这三个灵活的盒子模型和使用哪一个有什么区别?
You use whichever ones you need for the browsers you need to support. 您可以使用您需要支持的浏览器所需的任何一个。
display: box
As far as I can tell, wrapping via box-lines: multiple
is not implemented in any browser. 据我所知,通过
box-lines: multiple
包装box-lines: multiple
不会在任何浏览器中实现。
display: flexbox
http://caniuse.com/#feat=flexbox (Note that IE10 is the only browser marked as having partial support that supports wrapping) http://caniuse.com/#feat=flexbox (请注意,IE10是唯一标记为支持包装的部分支持的浏览器)
The specs for flexbox
and flex
are similar enough there's no reason not to include both, especially since IE10 only supports the flexbox
spec. flexbox
和flex
的规格足够相似,没有理由不包括两者,特别是因为IE10只支持flexbox
规范。 The spec for box
is very different and might not be worth including depending on the effect you're after, even though nearly all properties have an analog to the ones found in the flexbox
/ flex
specs. box
的规格是非常不同的,可能不值得包括,取决于你所经历的效果,即使几乎所有的属性都与flexbox
/ flex
规范中的flexbox
。
You may find that there are some browsers that support multiple specs. 您可能会发现有些浏览器支持多个规范。 There will likely come a time where they will drop support for the older spec, so always make sure you include the
flex
properties. 可能会有一段时间他们会放弃对旧规范的支持,因此请务必确保包含
flex
属性。
As far as I know, the above three different versions of the flexible box model can be classified by their ages. 据我所知,上述三种不同版本的柔性箱型号可按年龄分类。
display: box
- This was the first flexible box model that was accepted as the newest model around the year 2009. Don't use it. display: box
- 这是第一个被认为是2009年最新型号的灵活盒型号。请勿使用它。
display: flexbox
- This flexible box model came in the year 2011 which was still in its development. display: flexbox
- 这个灵活的盒子模型出现在2011年,仍在开发中。 Don't use it. 不要使用它。
display: flex
- This is the newest flexible box model that currently finds its place as the latest box standard. display: flex
- 这是最新的灵活盒子模型,目前可以作为最新的盒子标准。 This might further undergo some changes but this is preferred to the other two standards. 这可能会进一步发生一些变化,但这比其他两个标准更受欢迎。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.