flex兼容布局

最新推荐文章于 2021-06-30 13:07:43 发布

前端客户端职业研发

最新推荐文章于 2021-06-30 13:07:43 发布

阅读量283

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42284354/article/details/104672026

版权

本文对比了display:flex与display:box在弹性布局中的应用，详细解释了display:flex的浏览器兼容写法，指出在不考虑IE浏览器的情况下，PC端推荐使用display:flex。同时，文章提及移动端的浏览器兼容情况，如安卓的UC仅支持display:box，而iOS的UC则两者皆可。此外，还介绍了box-orient与flex-direction属性的具体用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

display:flex和display:box都可用于弹性布局，在实际的测试中display:flex不能完全的替代display:box；

display:flex的存在浏览器兼容性，兼容写法：
.container{
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+ */
}

不考虑IE浏览器的话，PC端上使用哪个都可以，一般使用display:flex；移动端的安卓的UC只支持display:box，iOS的UCdisplay:box和display:flex两个都支持。

box-orient: vertical; // 排列方向
box-direction: normal; // 两个值 normal(正常)和reverse（反向), box-direction：反向分布, 一般为了值reverse（反向）而用；
flex-direction: column; // row, row-reverse