从事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了。至于其他□□□□方面，就见仁见□□□智了。