需求
在页面开发的过程中,我们往往会经常使用到CSS布局,而目前使用最多的大部分都是flex
、grid
布局两种,今天UP主在编写页面的时候,有这样一个需求
1、在一个盒子里面,有很多元素,需要让他横向排列
2、每个元素的宽度未知
3、当元素很多的时候,需要自动换行的下一行
看是简单的需求,办法也有很多,下面列举两个
不完美实现方案
1、使用inline-block
直接在css中使用display:inline-block
,就可以实现效果
效果如图:
目前是完全符合上面的需求的,但是我们会发现,第一行最后一个位置,因为容纳不下下一个元素了,所以直接换行显示下一个元素,这样就导致最后的空隙很大,很影响美观
2、使用flex
有朋友可能会想,这个不是很简单,直接使用flex
布局,然后使用justify-content: space-between
不就可以完美的解决空隙大的问题啦,而且看起来很很和谐,使用这个方法确实可以让第一行的空隙变得很完美,但是我们会发现另外一个问题
效果如图:
可以看到,我们的第一行的确是完美的解决了空隙大的问题,但是随之而来的,就是第二行因为使用了justify-content: space-between
,导致下面直接把剩下的元素直接平均分了,很明显这样是会导致最后一行元素,不够铺满,而直接平均分了,这样也是不行的,那到底要怎么来解决问题呢
完美实现方法
如图所示,这就是我们说需要的效果,最后一行元素不够铺满一行时,让元素左对齐排列,那这样是如何实现的呢
其实实现方法很简单,同样是使用flex
布局,并且使用justify-content: space-between
属性
关键一步,我们在当前元素的伪元素after
添加flex:auto
即可实现
.parent{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&::after {
content: '';
flex: auto;
}
}
确实非常简单,我们看下原理
就是通过伪元素让伪元素的宽度正好补齐剩余的宽度,这样就相当于是一整行铺满,所以就不会出现上面的直接将下面的几个元素直接平均分了
Tips
:方法简单粗暴,可能有更好的办法,但是UP也是想分享自己在开发过程中遇到的问题是如何解决的,如果有更好的办法,也欢迎大家相互讨论相互学习