请教flex四列布局最后一行的处理问题？

Question

有数量不定的卡片，模版遍历数据显示，父元素宽度1160px，每个卡片275px，间距20px，最左边和最右边贴边。
如下图所示

html:

<div class="my-row">
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    .....(省略)
</div>

我现在用flex实现了

.my-row{
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-wrap: wrap;

}
.my-row .span3{
  width: 275px;
  margin-left: 0;
}

但是这样的话最后一行如果不是四个元素比如3个就会因为justify-content：space-between而均匀分布，
如图：

现在希望是左对齐

如果我把justify-content改成flex-start的话，卡片之间将没有间距。如果设置margin-right:20px的话，又需要对每列最右边的卡片nth-child(4n)单独设置margin-right：0，否则最右边卡片不贴边。

这样虽然可以解决问题，但是如果窗口缩小到只显示三列的时候，nth-child(4n)的匹配就不对了，又会出现ui问题需要重新写媒体查询设置最右边卡片的margin-right，这样的话我需要针对3列，2列，1列分别写媒体查询，感觉很麻烦，而且flex-start的话缩小窗口到3列的话右边会有大片空白，不是很好的自适应，希望是space-betwen那种卡片居中。古请教下有没有比较好的解决办法

Answer 1

.my-row:after {
    content: '';
    width: 275px;
}

Answer 2

建议在最后一行补上空白的元素~大多数人也都是这么做的

Answer 3

虽然是2年前了.
还是提供一种新的方案吧.

思路一致,同样是用占位元素.

以vue为例

    <ul class="list">
      <li class="item" v-for="item in list"></li>
      <li class="item holder" v-for="i in holder"></li>
    </ul>

list的长度不定,那么可以用一个计算属性holder来动态生成占位元素,算法如下

computed: {
      holder() {
        return 4 - (this.list.length % 4);
      },
}

有多少列就%多少

.holder再添加opacity:0使其不可见.

Answer 4

.my-row{
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 20px;
}
.my-row .span3{
    width: 275px;
    height: 100px;
    background-color: red;
    margin: 20px 20px 20px 0;
}

<div class="my-row">
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
</div>

Answer 5

用grid布局

display: grid;
grid-template-columns: repeat(auto-fit, 275px);
gap: 0 20px;
justify-content: space-between;

Answer 6

同求，一样的问题

Answer 7

楼主解决了吗，怎样解决哒