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

2023-02-23    分类: 网站建设

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

网站标题:网站前端开发之使用flex布局的小小心得
链接分享:https://www.cdcxhl.com/news37/239137.html

成都网站建设公司_创新互联,为您提供网站策划定制开发网站收录网站内链ChatGPT面包屑导航

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都定制网站网页设计