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