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

查看:164
本文介绍了柔性箱模型 - 显示:flex,box,flexbox?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我们今天很多人都知道显示属性的旧值,如 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 属性 flex 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(前缀)

  • Firefox 2.0? (prefixed)
  • Chrome 4.0? (prefixed)
  • Safari/iOS 3.1? (prefixed)
  • Android 2.1 (prefixed)


  • Chrome 17- ?? (前缀)

  • Internet Explorer 10(前缀)


  • Chrome 21(前缀),29(无前缀)

  • Opera 12.1(无前缀),15(webkit前缀)

  • Firefox 22(无前缀)

  • Safari / iOS 7(前缀)

  • Blackberry 10(前缀)

  • Internet Explorer 11(无前缀)

  • Chrome 21 (prefixed), 29 (unprefixed)
  • Opera 12.1 (unprefixed), 15 (webkit prefix)
  • Firefox 22 (unprefixed)
  • Safari/iOS 7 (prefixed)
  • Blackberry 10 (prefixed)
  • Internet Explorer 11 (unprefixed)

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 规范。 盒的规范是非常不同的,可能不值得包括取决于你的效果,即使几乎所有的属性都有一个类似于在 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆