小编典典

柔性盒模型-显示:flex,box,flexbox?

css

我们中的许多今天的较旧的值都知道display像房地产inlineblock新的灵活盒模型后已经过时了CSS3中被引入。但是,我们可能会在同一柔性盒模型中在网络上找到不同的信息。

我们可能会发现主要存在3种不同的值display,即财产flexboxflexbox。这三种灵活的盒子模型和使用哪种模型有什么区别?


阅读 393

收藏
2020-05-16

共1个答案

小编典典

您可以使用所需的浏览器来支持所需的浏览器。

display: box

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

据我所知,box-lines: multiple在任何浏览器中均未实现via环绕。

display: flexbox

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

显示:flex-当前标准

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

(请注意,IE10是唯一标记为具有部分支持的自动浏览器的浏览器)

为规范flexboxflex足够相似,我们没有理由_不_以包括,特别是因为IE10仅支持flexbox规范。的规格box有很大不同,即使您所追求的效果也不尽人意,尽管几乎所有属性都与flexbox/flex规格中的属性类似。

您可能会发现有些浏览器支持多种规格。他们可能会放弃对较早规格的支持,因此请务必确保包括这些flex属性。

2020-05-16