flex布局 设置justify-content: space-between后最后一行会如下这样：

解决：可以在父元素添加after伪类，并在子元素里添加动态类名，proList.content.length是子元素总数，判断最后一行余几个，以下是一行四个为例：

 :class="(proList.content.length%4)==3?'three-product':''||(proList.content.length%4)==2?'two-product':''||(proList.content.length%4)==0?'zero-product':''"
 .hydrated{
     display:flex;
     justify-content: space-between;
     flex-wrap: wrap;
     &::after{
       content: "";
       flex: auto;
    .three-product{
     &:nth-last-of-type(1),&:nth-last-of-type(2){
        margin-left: 24px;
    .two-product{
      &:nth-last-of-type(1){
        margin-left: 24px;
   .zero-product{
      &:nth-last-of-type(1),&:nth-last-of-type(2),&:nth-last-of-type(3){
      margin-left: 24px;
     .tb-cell{
       width: 23%;
       height:270px;
       margin-bottom: 10px;
       background:rgba(255,255,255,1);
       box-shadow:0px 0px 10px 1px rgba(239,246,252,1);}
最后得到以下的效果
 
 
                    flex布局 设置justify-content: space-between后最后一行会如下这样：解决：可以在父元素添加after伪类，并在子元素里添加动态类名，proList.content.length是子元素总数，判断最后一行余几个，以下是一行四个为例： :class="(proList.content.length%4)==3?'three-product':''||(proLis...
在使用flex布局时，发现要使其间隔相同，当处于最后一行时排列将会有误
更改了样式之后，在要改的布局外加div，我定义为cardList，每块的card class名为card增加伪元素：
.cardList{
  display: flex;
  width: auto;
  justify-content: space-between;
  flex-wrap:wrap
.cardList:after{
  content: "";
  width: 3
				
给盒子设置 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
1. 使用 justify-content 属性
justify-content 属性可以设置 flex 容器内项目在主轴上的对齐方式。当设置为 flex-start 时，flex 容器内所有项目都会向左对齐。因此，在最后一行项目数量不足一整行时，设置 flex 容器的 justify-content 为 flex-start，即可左对齐最后一行的项目。
2. 使用 :last-child 伪类
:last-child 伪类可以选中父元素内最后一个子元素。因此，在最后一个列表项目上，可以使用 :last-child 伪类，并设置其 margin-right 为 0，将其与右侧的空白区域合并，使最后一行左对齐。
需要注意的是，以上两种方法均需要将 flex 容器的宽度设置为固定值或百分比，以保证列表项目能够正确地占据 flex 容器内的位置。同时，使用 :last-child 伪类时需注意，最后一行的项目可能不是最后一个子元素，因此需要使用其他伪类进行选中。