CSS3 display:flex和display:box有什么区别?

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/YaoDeBiAn/article/details/79916824

同样是弹性盒模型,但是前后两个版本不同,还是有一定的区别的,以下是百度后的记录总结:

1.前者是flex2012年的语法,也将是以后的标准语法,大部分浏览器已经实现了无前缀版本。

后者是2009年的语法,已经过时,是需要加上对应前缀的。

2.flex是最新的,但是在实际的浏览器测试中,display: flex 不能完全替代display: -webkit-box

display: box 使用可以参考http://www.html5rocks.com/en/tutorials/flexbox/quick/ 
display: flex 使用可以参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 
兼容性的问题可以参考https://css-tricks.com/old-flexbox-and-new-flexbox/ 
Android UC浏览器只支持display: box语法。而iOS UC浏览器则支持两种方式 

需要注意的是如果要使用line-clamp时需要用display:box;

3.推荐参考文章:flex:阮一峰:flex布局

                               box:张鑫旭:CSS box-flex属性,然后弹性盒子模型简介

猜你喜欢

转载自blog.csdn.net/YaoDeBiAn/article/details/79916824
今日推荐