不作处理的情况下，最后一行是这样的：

如果一行有 6 个元素，就要设置第一行以后的所有行间距（通过 :nth-child(n + 7) 设置）；

现在处理最后一行的情况：
设置最后一行元素左对齐，而不是平分，有人说让最后一个元素 margin-right: auto 就好了，结果如下：

.item{
    &:last-child {
      margin-right: auto;

 列间距没了，既然用了space-between自动设置列间距，就是不想计算间距手动设置到 item 上，看来加了 margin-right 属性后space-between在这一行上就失效了，先手动设置一下：
 
    &:last-child {
      margin-right: auto;
      margin-left: 10px;

 效果不错，正是期待的结果；但是如果有 n+3 个元素时：
 
 再继续控制就复杂了，放弃使用justify-content: space-between;，看来这并不是理想的方案。
 
方案二： 控制每一个 item 的间距
 
<style lang="less" scoped>
.div-flex {
  width: 650px;
  background-color: antiquewhite;
  display: flex;
  flex-flow: row wrap;
  .item {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    box-sizing: border-box;
    background-color: aquamarine;
    margin-right: 10px;
    &:nth-child(n + 7) { margin-top: 10px; }
    &:nth-child(6n) { margin-right: 0; }
</style>

 算是中规中矩的一种方案，没有任何问题，也无特色。（跟浮动的方案差不多了）
 
另外一种实现需求的方案：用 grid 来实现
 
.div-flex {
  width: 650px;
  background-color: antiquewhite;
  display: grid;
  // grid-template-columns: repeat(6, 100px);
  // grid-template-columns: repeat(auto-fill, 100px);
  grid-template-columns: repeat(6, 1fr);// 三种写法都行
  grid-gap: 10px;
  .item {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    box-sizing: border-box;
    background-color: aquamarine;
这种方案来实现此需求最简单合适。
                    需求：元素高度不固定，总数不固定，一行 6 个元素方案一（×）： 使用justify-content: space-between;自动设置列间距的情况&lt;template&gt;  &lt;div class="ft"&gt;    &lt;div class="div-flex"&gt;      &lt;div class="item" v-for="i in 5" :key="i"&gt;&lt;/div&gt;    &lt;/div&gt;  &lt;/div&gt;&lt;
				
在我们的日常开发中，在使用flex弹性盒布局的时候，会遇到这样一个常见的问题，当justify-content的值设为space-around或者是space-between时，会存在这样一个问题：如果最后一行元素未占满一行，那么该行元素会均匀分布而不是左对齐。如实现这种布局:
实现方法给父元素创建伪元素并设置flex:auto或者flex:1...
				
给盒子设置 justify-content: space-between ， 可以均匀排列盒子中的每个元素，首个元素放置于起点，末尾元素放置于终点。达到左右对齐的效果。但当最后一行元素不能铺满盒子时，会在盒子中均分排列，效果并不是我们需要的。
盒子设置flex布局， 对齐方式设置 justify-content: space-between时，将最后一行元素左对齐，有一下几种方法：特点：适用于任意列数布局，比较简单，缺点是会产生空标签
方案：使用循环体循环一整行空元素。宽度为单个元素宽度，高度为0codeh
给父级设置display:flex;
实现一行中内容靠边对齐，则需要设置justify-content:space-between;
这样的话，最后一行不填满的情况下，就会出现下面的问题：
此时则需要对最后一行单独设置了：
下面我分几种情况进行分析：
对应的html部分代码统一如下：
<h2 style="text-align: center">flex布局</h2>
<div cl
				
使用flex布局发现，如果规定了一行三个，使用flex-around之后，只有4个数据时最后一行会居中显示
解决思路，既然是flex布局，那么就补两个盒子就行了。
<div class="content-item" v-for="item in roomList" @click="jump(item.servicesId,item.money)">
        <img v-if="picList.indexOf(item.icon.substring(item.icon.la
无法确定flex换行后列表个数又不固定，直接调试html特别麻烦，使用Grid布局Grid布局天然有gap间隙，且天然格子对齐排布，因此，实现最后一行左对齐可以认为是天生的效果。
<div class="box">
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"&g..
				
在使用flex布局时，为了让元素自动铺满宽度，我们会用justify-content: space-between;，但是当最后一行元素个数不足时，会出现下面的情况。
看了网上的方法都是在后面补上差的个数，所以我这里的解决方法也是补齐个数。考虑到有一种情况，元素个数可能不是固定的，我们就无法知道具体相差的个数来填充，比如列表是后端返回的数据，所以这里通过循环动态添加相差的个数。
我这里就简单来了，我想要呈现的是1行4列，总个数是9个，所以我就加上以下内容，
list.length 是页面要显示的总记录数
				
Flexbox 是用于布局网页的工具，让我们可以更轻松地控制元素的位置和大小。其中一个常见的问题就是如何让最后一行对齐。
一般来说，flex 容器会自动将所有子元素从左到右依次排列，并依据一些规则对它们进行对齐和分配空间。如果你希望最后一行元素能够对齐，可以通过以下方法实现：
1. 使用 `justify-content: space-between` 或 `justify-content: space-around`。
这两个属性分别表示在主轴上将剩余空间分配到子元素之间，或者在子元素周围分配空间。可以让最后一行的元素也分配到等比例的空间，从而实现对齐。
2. 使用 `flex-wrap: wrap`。
这个属性表示当容器宽度不足以容纳所有子元素时，是否要折行。将它设置为 `wrap`，让多余的子元素能够自动换行到下一行，就可以实现最后一行对齐。
3. 使用一个假的占位元素。
在最后一行添加一个没有实际内容的 `<div>` 元素，将其设置为 `flex-grow: 1` 占满所有剩余空间。这样就可以让最后一行和其他行一样对齐。
总之，实现最后一行对齐的方法有很多种，具体取决于你的需求和网页设计。通过灵活地运用 flexbox 的属性和技巧，可以让你轻松实现各种复杂的布局。