首页 前端知识 flex布局使用space-between后最后一行左对齐

flex布局使用space-between后最后一行左对齐

2024-03-13 00:03:41 前端知识 前端哥 612 130 我要收藏

需求

在页面开发的过程中,我们往往会经常使用到CSS布局,而目前使用最多的大部分都是flexgrid布局两种,今天UP主在编写页面的时候,有这样一个需求

1、在一个盒子里面,有很多元素,需要让他横向排列

2、每个元素的宽度未知

3、当元素很多的时候,需要自动换行的下一行

看是简单的需求,办法也有很多,下面列举两个

不完美实现方案

1、使用inline-block

直接在css中使用display:inline-block,就可以实现效果

效果如图:

image-20220925003905006

目前是完全符合上面的需求的,但是我们会发现,第一行最后一个位置,因为容纳不下下一个元素了,所以直接换行显示下一个元素,这样就导致最后的空隙很大,很影响美观

2、使用flex

有朋友可能会想,这个不是很简单,直接使用flex布局,然后使用justify-content: space-between不就可以完美的解决空隙大的问题啦,而且看起来很很和谐,使用这个方法确实可以让第一行的空隙变得很完美,但是我们会发现另外一个问题

效果如图:

image-20220925004244014

可以看到,我们的第一行的确是完美的解决了空隙大的问题,但是随之而来的,就是第二行因为使用了justify-content: space-between,导致下面直接把剩下的元素直接平均分了,很明显这样是会导致最后一行元素,不够铺满,而直接平均分了,这样也是不行的,那到底要怎么来解决问题呢

完美实现方法

image-20220925004621840

如图所示,这就是我们说需要的效果,最后一行元素不够铺满一行时,让元素左对齐排列,那这样是如何实现的呢

其实实现方法很简单,同样是使用flex布局,并且使用justify-content: space-between属性

关键一步,我们在当前元素的伪元素after添加flex:auto即可实现

.parent{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &::after {
    content: '';
    flex: auto;
  }
}

确实非常简单,我们看下原理

image-20220925005025055

就是通过伪元素让伪元素的宽度正好补齐剩余的宽度,这样就相当于是一整行铺满,所以就不会出现上面的直接将下面的几个元素直接平均分了

Tips:方法简单粗暴,可能有更好的办法,但是UP也是想分享自己在开发过程中遇到的问题是如何解决的,如果有更好的办法,也欢迎大家相互讨论相互学习

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3714.html
标签
评论
发布的文章

JavaScript基础库

2024-04-09 00:04:11

解决vue npm 下载echart出错

2024-04-09 00:04:05

Echarts中option属性设置

2024-04-08 23:04:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!