使用flex box（弹性盒子模型）进行页面布局的注意事项

66 阅读 0 评论 44 点赞

我是靠谱客的博主聪慧纸鹤，最近开发中收集的这篇文章主要介绍使用flex box（弹性盒子模型）进行页面布局的注意事项，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

什么时候下使用flex比较方便？

flexbox最主要的作用在于我们可以通过这个属性快速设置和操作它的子元素的布局，可以方便地实现居中、居左、居右、两边对齐、垂直居中、水平居中的效果；
一般如果遇到这样的布局要求，使用flex会非常方便：

子元素高度不等，垂直居中
多栏布局，栏目间隔自适应
多栏布局，子元素宽高不等

display:flex 、display:box 之间的区别是什么？
本质上来讲，display:flex 和 display:box 之间没有什么区别，仅仅只是各个阶段的草案命名。
- 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/)
所以看到有些css代码会写这样的代码，不过是为了兼容各个版本的浏览器，因为一些浏览器对flex的布局支持不一，就需要写一些兼容的代码。
display:box;
display:flex;
display: -ms-flexbox;
总的来说display:box 是一种比较老的规范，如果需要兼容一些老的机型需要加上display:box来进行支持，display:flex是新的规范；

父元素设置display:flex后，子元素的某些属性失效？
在为某一元素设置flex属性后，它的子元素都会成为伸缩项目，clear、float、vertical-align 属性将会失效；

浏览器的兼容性？
这里写图片描述

可以看到，flex在webkit和moz内核的浏览器上表现良好，IE下表现平平，在IE11以后的兼容性一般，只实现了部分兼容（存在大量bug）；
Android4.4版本以上的浏览器支持良好；
caniuse中并没有统计一些国内浏览器的兼容情况，如UC浏览器和QQ浏览器。微信使用的是QQ浏览器内核x5，所以在开发一些手机端的东西的时候，就需要考虑QQ浏览器的兼容性。
QQ浏览器：兼容性良好；
UC浏览器：iOS下兼容良好，Android下暂不支持flex-flow，flex-wrap 属性（同一家浏览器在iOS和android上的表现差异这么大，也真是奇葩）；

兼容写法：

.flex{
    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-flex;  /* IE 10 */
    display: flex;  /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}

使用flexbox布局有哪些通用的解决方案？

本人也经常在页面排版过程中使用flex box 进行布局，因为flex布局为排版提供了非常便利的方法，特别是做一些列表排版的时候非常省事儿，但是毕竟作为开发者，需要考虑的应用场景不仅仅是chrome，iOS等这些兼容性非常好的场景和设备，我们也要经常面对一些其他的场景，如一些定制版的android系统和杂七杂八的手机品牌。

使用flex.css

https://github.com/1340641314/flex.css

这个css库代码比较精简，使用起来也比较方便，不太完美的地方是，这个库没有提供flex-flow的支持；

使用autoprefix

这是一个npm包，可以为编写的代码自动加上前缀，这样就省去了为不同的内核添加前缀的麻烦；