css – 弹性盒模型 – 显示:flex,box,flexbox?

前端之家收集整理的这篇文章主要介绍了css – 弹性盒模型 – 显示:flex,box,flexbox?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们中许多人今天意识到,在CSS3中引入了新的灵活框模型之后,显示属性(如内联和块)的旧值已经过时了。但是,我们可能会在同一个灵活的框模型中在网络上找到不同的信息。

我们可能主要找到3个不同的显示属性值,即flex,Box和flexBox。这三款灵活的盒子型号有哪些不同?

解决方法

您需要为需要支持的浏览器使用您需要的任何一个。

display: box

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

据我所知,通过框线包装:多个不在任何浏览器中实现。

display: flexbox

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

display: flex – 目前的标准

> Chrome 21(前缀),29(未修改)
> Opera 12.1(unprefixed),15(webkit前缀)
> Firefox 22(未修改)
> Safari / iOS 7(前缀)
>黑莓10(前缀)
> Internet Explorer 11(未修改)

http://caniuse.com/#feat=flexbox(请注意,IE10是唯一被标记支持包装的部分支持的浏览器)

flexBox和flex的规范是相似的,没有理由不包括两者,特别是因为IE10只支持flexBox规范。盒子的规格是非常不同的,可能不值得,包括取决于你以后的效果,即使几乎所有的属性都与在flexBox / flex规格中找到的类似。

您可能会发现有些浏览器支持多种规格。可能会有一段时间他们会放弃旧规范的支持,所以总是确保你包含flex属性

原文链接:https://www.f2er.com/css/218726.html

猜你在找的CSS相关文章