如何实现CSS中flex布局最后一行左对齐?

·  阅读 3386
如何实现CSS中flex布局最后一行左对齐?

前言

flex布局目前已经非常流行了,它基本上可以完成大部分的布局需求。早一些的float布局、表格布局等等便没有那么受欢迎了。但是任何事物都不是完美的,flex布局也一样,它也有瑕疵,就比如我们今天所要讲的flex布局中最后一行对齐问题。

1.为什么要最后一行左对齐

我们都知道flex布局就是一个二维坐标系,有横轴和纵轴,里面的子元素则根据我们最初定义的横轴和纵轴初始方向进行排列,如下图:

在flex布局中,justify-content属性非常常用,它用来规定横轴元素的排列规则,通常使用的有以下几种:

  • 两端对齐:justify-content: space-between;
  • 左对齐:justify-content: flex-start;
  • 右对齐:justify-content: flex-end;
  • 居中对齐:justify-content: center;

当我们使用两端对齐时,最后一行元素就会出现问题,导致整体样式不够美观,如下图一样:

代码如下:

<style>
    .container {
      width: 300px;
      border: 1px solid #000;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .list {
      width: 66px;
      height: 66px;
      margin-bottom: 10px;
      background-color: rgb(148, 148, 131);
    }
</style>
<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>
复制代码

这个时候我们可能就需要让最后一行元素左对齐。

2.每行列数固定

如果每一行的元素固定,比如我们这里每一行的元素都是四个,这个时候我们有两种方式解决最后一行元素左对齐问题。

2.1 模拟两端对齐

这里模拟的意思代表我们不使用justify-content: space-between进行两端对齐,但是我们又要有两端对齐的效果,而且每一个子元素之间的间隙也要有。

为了实现这种效果,我们需要动态计算每个 子元素之间的间隙,间隙我们利用margin来控制,代码如下:

.container {
  width: 300px;
  border: 1px solid #000;
  display: flex;
  flex-wrap: wrap;
}

.list {
  width: 66px;
  height: 66px;
  margin-bottom: 10px;
  background-color: rgb(148, 148, 131);
}
// 每一行的最后一个元素不设置右边距
.list:not(:nth-child(4n)) {
  margin-right: 22px;
}
复制代码

这种方式虽然也可以实现两端对齐的效果,但是需要计算每一个子元素的右边距。

2.2 根据个数动态设置margin

这里的动态设置margin指的是设置最后一个元素的margin值,假如我们这里每一行4个元素,但是最后一行只有三个元素,此时如果我们将最后一行的最后一个元素的右边距设置为元素宽度+间隙宽度,那么是可以实现左对齐效果的。

但是这个时候我们需要知道最后一行有几个元素,这里会用到一个CSS选择器:

  • .list:last-child:nth-child(4n - 1)说明最后一行,要么3个元素,要么7个元素……
  • .list:last-child:nth-child(4n - 2)说明最后一行,要么2个元素,要么6个元素……

上面的两行代码让我们取到了最后一行的第3个元素和第2个元素,然后动态设置margin,代码如下:

.container {
  width: 300px;
  border: 1px solid #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list {
  width: 65px;
  height: 65px;
  margin-bottom: 10px;
  background-color: rgb(148, 148, 131);
}

.list:last-child:nth-child(4n - 1) {
  margin-right: calc(66px + 12px);
}

.list:last-child:nth-child(4n - 2) {
  margin-right: calc(66px + 66px + 12px + 12px);
}
复制代码

当最后一行有三个元素时,则最后一个元素的右边距=元素宽度+间隙宽度。

3.每行子元素宽度不固定

有时候我们每行的元素宽度不是固定的,这个时候我们有两外两种方法来实现最后一行左对齐。

3.1 margin-right:auto

这种方式实现起来很简单,我们只需要设置最后一个元素的margin-right为auto即可,代码如下:

.container {
  width: 300px;
  border: 1px solid #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list {
  width: 65px;
  height: 65px;
  margin-bottom: 10px;
  background-color: rgb(148, 148, 131);
  margin-right: 10px;
}

.list:nth-child(1) {
  width: 65px;
  height: 65px;
  margin-bottom: 10px;
  background-color: rgb(148, 148, 131);
  margin-right: 10px;
}
.list:nth-child(2) {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  background-color: rgb(148, 148, 131);
  margin-right: 10px;
}
.list:nth-child(3n) {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  background-color: rgb(148, 148, 131);
  margin-right: 10px;
}

.list:last-child {
  margin-right: auto;
}
复制代码

为了方便大家理解,我给很多list元素设置了不同宽度,大家可以看到最后一行元素虽然左对齐了,但是最右边并没有实现完美的贴边对齐,所有这也是这种方式的一个小小的缺陷。

3.2 设置伪元素

除了利用margin-right:auto之外,我们还可以利用伪元素来实现最后一行左对齐,创建伪元素并设置flex:auto或者flex:1,代码如下:

.container {
  width: 300px;
  border: 1px solid #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list {
  width: 65px;
  height: 65px;
  margin-bottom: 10px;
  background-color: rgb(148, 148, 131);
  margin-right: 10px;
}

.list:nth-child(1) {
  width: 65px;
  height: 65px;
  margin-bottom: 10px;
  background-color: rgb(148, 148, 131);
  margin-right: 10px;
}

.list:nth-child(2) {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  background-color: rgb(148, 148, 131);
  margin-right: 10px;
}

.list:nth-child(3n) {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  background-color: rgb(148, 148, 131);
  margin-right: 10px;
}

.container::after {
  content: '';
  flex: auto;
  /* 或者flex: 1 */
}
复制代码

这种效果和margin:auto是一致的。

4.每行列数不固定

有些时候我们每一行的个数是不定的,这个时候上面的方法就不太适用了,我们需要使用其它方法来实现最后一行左对齐:使用足够多的占位空白元素来进行占位,占位元素的个数由最多列数的个数决定。

.container {
  border: 1px solid #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list {
  width: 65px;
  height: 65px;
  margin-bottom: 10px;
  background-color: rgb(148, 148, 131);
  margin-right: 10px;
}

.container>i {
  width: 65px;
  margin-right: 10px;
}

<div class="container">
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <i></i><i></i><i></i><i></i><i></i>
</div>
复制代码

这里我们声明了很多占位i标签元素,并且给它设置了宽度,因为我们没有给它设置高度,所以不会影响我们的布局,这种方式也实现了最后一行左对齐,但是它改变了html结构。

总结

这里给出了4种实现flex布局最后一行左对齐的方法,但是每一种都还是有瑕疵的,运用最广泛的还是利用占位元素的方式,因为它不仅适用于每行元素不固定的场景,每行元素个数固定时它也可以使用。

但是如果想要完美实现两端对齐,可以考虑grid布局方式。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改