理解display:box 和 display:flex


参考学习:http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/(box-flex属性和谐版 & 不和谐版)

http://www.cnblogs.com/qieguo/p/5421252.html (css 的各种布局方式)

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html (flex布局教程【厉害】)

css  分 display position float 布局

关于display:box 和 display:flex 布局区别

display:box是2009年的语法版本,使用时需要加上浏览器的前缀,不过现在已经过时了。

display:flex是2012年最新修正的语法版本,浏览器支持较好,也将成为以后标准的语法。

中间2011年也提出了一个奇葩的语法版本display:flexbox,非官方的,当时主要是为IE浏览器使用。

较完整的兼容性代码:

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浏览器支持:

IE Firefox Chrome Safari Opera
不支持 2.0-40.0
(-moz-)
4.0-45.0
(-webkit-)
6.0-8.0
(-webkit-)
15.0-29.0
(-webkit-)

display:flex浏览器支持:

IE Firefox Chrome Safari Opera
11.0+ 22.0+ 21.0+(-webkit-)
29.0+
6.1+(-webkit-)
9.0+
15.0+(-webkit-)
17.0+
引用知乎上的一个答案:
链接:https://www.zhihu.com/question/22991944/answer/93258756

背景:今天用flex柔式布局做手机页面,在google浏览器下模拟各主流设备完美显示,心情美美的。
为了保证兼容性,我用同事古董级的魅族手机里系统自带的M牌浏览器做最终测试,结果果然有问题,什么情况呢。
手机码字上不了代码截图,我手写出来你看下
father {display:flex; display:-webkit-flex; flex-flow:row; -webkit-flex-flow:row; justify-content:space-around; }
child { box-flex:1.0; -webkit-box-flex:1.0; }
因为是纯手机页面,只考虑webkit内核,明明模拟测试的没问题啊!为什么在古董机上就不行呢?
后来发现,只要在父容器原代码中加入 display:-webkit-box; 就可以完美解决。
如果要说区别,display:box; 是老规范,要兼顾古董机子就加上它。
flexbox flex 是新规范,老机子不支持的。

智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告