400-800-9385
网站建设资讯详细

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

发表日期:2019-09-20 09:14:00   作者来源:文庆   浏览:142   标签:网站前端开发    
从事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了。至于其他方面,就见仁见智了。
 
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/5316.html