当前位置: 首页 > 科技观察

你肯定会用到CSS多行多列布局

时间:2023-03-21 21:58:21 科技观察

前言:因为在项目中使用flex的过程中,如果使用space-between对齐两端,会遇到最后一行难的问题对齐。本文主要列出多行多列常见布局的解决方案,方便大家日常开发使用。废话不多说,直接进入正题:解决方案一:我们都知道标签是填充的。错位的原因是最后一行的子项没有达到4个,space-between的对齐自然会中间留空。既然如此,何不直接把空格填满,这样就有4个元素了。

效果如下:子元素个数不为4怎么办?如果我们仔细观察,不难发现最后一行的最小值为1,那么我们只需要填n-1即可。如果只有3个,也可以用伪元素::after补最后一个位置。方案二:计算剩余空间如果我们知道最后一行的剩余空间,我们就完全可以控制最后一个元素的margin或者scaling来填满剩余空间,自然就可以左对齐了。为此,我们必须首先确定宽度和边距。宽度通常是已知的。我们只需要确定边距来确认剩余空间。继续上面的例子,假设一行有4个元素,每个占24%,4是24%*4=96%,那么可以确定总保证金为4%,因为有4个元素在一行中,最后一个右边距是多余的,所以可以确定单边距为4%/3=1.333%,计算完之后就可以开始写代码了:效果如下:可能有些朋友觉得懒得记,所以下面直接把打包好的sassmixin给,copy可以使用:/***多列布局*$count项目数量*$itemWidth项目宽度,百分比,不包括百分号*$itemHeight项目高度,可选*/@mixingrid($count:4,$itemWidth:20,$itemHeight:auto){$rest:100-$itemWidth*$count;//剩余空间$space:percentage($rest/($count-1)/100);//边距显示:flex;flex-wrap:wrap;/*这里建议把*换成特定的布局容器(div,view...),加速css解析*/&>*{flex:00#{$itemWidth+'%'};height:$itemHeight;margin-right:$space;margin-bottom:$space;box-sizing:border-box;&:nth-child(#{$count}n){margin-right:0;}&:nth-last-child(-n+#{$count}){margin-bottom:0;}/*为了兼容space-between的布局,占用剩余空间*/&:last-child{margin-right:auto;}}}/*如何使用*/.list{/*一行4项,每项占20%宽度*/@includegrid(4,20)}以上是flex版本,如果需要为了兼容IE浏览器,可以使用float布局替换,float是自动的左对齐,因此不需要填充末尾的剩余空间。方案三:Grid布局Grid布局,默认是左对齐,即使使用了space-between。效果如下:以上三种方案各有优点:方案一的缺点是实现不够优雅,需要添加无用的占位符标签。方案2没什么缺点,只是写法会比较复杂,但是只要将mixin打包在sass中使用,就足够简单了,就算需要兼容ie,也只需要替换即可与浮动。第三种兼容性最差,不能在ie中正常使用,但用法最简单,布局比flex还要强大。综上,在实际使用中,推荐使用第二种方案。