网站前端开发之使用flex布局的小小心得

从事web前端开发最近手上的项目有很多产品列表模块，从布局上来说以前习惯性用float来进行排版，这种方式的优点在于思路简单，算好比例，给出margin进行间隔控制，然后将最右边的一个产品的margin用css选择器:nth-child() 取消即可，但是这样一来就有一个弊端，那就是浮动会给上下连接的其他页面模块带来偏移，在之前我都是在产品列表外围div里加上display:table来消除这个影响的，这样做出来的效果也确实不错，但是有些特殊情况的时候display:table这个属性会将网页撑开、出现横向滚动条，这个时候将table换成inline-block就能解决。这样下来就感觉比较耗时间，而且有时候排查问题一时间也想不到这个点上来。

到后面渐渐的开始接触flex布局，发现是真的简单明了，一个display:flex就解决了产品列表单个默认自动换行的问题，不需要float来进行排列了。然后就是justify-content属性：flex-start、flex-end、center、space-betwe、space-arou这些属性，分别实现了从左边开始排列、从右边开始排列、居中排列、两端对齐模块中间间隔等分排列、模块两侧间隔相等排列。

而这个属性不仅仅用于列表排列，同样适用于文字排列，一些a标签里的文字，上下左右居中的话，加个justify-content：center就水平居中了，垂直居中的话还需要加一个align-items：center就行了，这样就不用写死等高的行高，灵活度大大增加。
一般来说一些产品、新闻列表啊；横向导航栏的栏目啊，都是用的justify-content：space-betwe来进行栏目模块间的间隔控制，只需算好栏目模块的宽度占比就ok了。但是在多个产品多排排列的时候加了flex-wrap:wrap进行换行外，在产品不够排满的时候，会出现尾排产品左右两边对齐，中间空格太多，影响排列规律美观的情况，这种尾排未满的情况还是经常遇到的，所以一般这种排列的时候，就需要从左开始排列，也就是justify-content：start这个属性，然后给每个栏目模块margin值进行中间间隔控制，运用:nth-child()选择器进行最右边清除margin。虽然这样做看起来和运用float + margin来排列差不多，但是这样做不需要考虑清除浮动的问题。算是比较方便的处理方法了。

日常页面开发中列表栏目排版的处理运用以上方法基本就ok了。至于其他方面，就见仁见智了。