display:box属性
原创
©著作权归作者所有:来自51CTO博客作者wg_cdhcdjdB的原创作品,请联系作者获取转载授权,否则将追究法律责任
-
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
注:我们一般多使用box-align:center;来实现子元素的垂直居中。
注:我们一般多使用box-pack:center来实现子元素水平居中方式
-
- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
-
- W3C 2011年第2次草案:[display:flexbox | inline-flexbox;](https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)
-
- W3C 2012年第5次草案及以后的候选推荐标准:[display:flex | inline-flex;](https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/)
-
前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本。
-
后者是2009年的语法,已经过时,是需要加上对应前缀的。
-
所以兼容性的代码,大致如下
-
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-
display: -moz-box; /* Firefox 17- */
-
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-
display: -moz-flex; /* Firefox 18+ */
-
display: -ms-flexbox; /* IE 10 */
-
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-
如果要说区别,display:box; 是老规范,要兼顾古董机子就加上它。
-------------------------------------------
个性签名:海到无边天作岸,山登绝顶人为峰!