柔性盒模型 - 显示:flex、box、flexbox? [英] Flexible box model - display : flex, box, flexbox?

问题描述

今天我们中的许多人都知道，在新的弹性盒模型之后，display 属性的旧值，如 inline 和 block 已经过时了已在 CSS3 中引入.但是，我们可能会在同一个弹性盒模型中在网络上找到不同的信息.

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. But, we might find different information on the web in the same flexible box model.

我们可能会发现 display 属性主要有 3 个不同的值，即 flex、box 和 flexbox.这三种弹性盒子模型有什么区别，使用哪一种?

We might find mainly 3 different values of the display property namely flex, box and 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.

• Firefox 2.0?(前缀)
• Chrome 4.0?(前缀)
• Safari/iOS 3.1?(前缀)
• Android 2.1(带前缀)

据我所知，任何浏览器都没有实现通过 box-lines: multiple 包装.

As far as I can tell, wrapping via box-lines: multiple is not implemented in any browser.

• Chrome 17-??(前缀)
• Internet Explorer 10(带前缀)

• Chrome 21(带前缀)、29(无前缀)
• Opera 12.1(无前缀)、15(webkit 前缀)
• Firefox 22(无前缀)
• Safari/iOS 7(带前缀)
• Blackberry 10(带前缀)
• Internet Explorer 11(无前缀)

http://caniuse.com/#feat=flexbox(注意 IE10 是唯一的浏览器标记为具有支持换行的部分支持)

http://caniuse.com/#feat=flexbox (Note that IE10 is the only browser marked as having partial support that supports wrapping)

flexbox 和 flex 的规格非常相似，没有理由不同时包含两者，特别是因为 IE10 只支持 flexbox 规范.box 的规范非常不同，根据您所追求的效果可能不值得包括在内，即使几乎所有属性都类似于 flexbox 中的属性>/flex 规范.

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

您可能会发现有些浏览器支持多种规格.他们很可能会放弃对旧规范的支持，因此请始终确保包含 flex 属性.

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、box、flexbox?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！