使用flex布局怎么较好的完成一个列表的排布？求求大佬指点

Question

问题描述

我想使用flex布局去实现一个自适应的列表，定义了属性justify-content: space-around;，但是当项目数量不足以排列成一行时，会与其他项目的排布空隙不同，我该如何定义属性使项目不足以排列成一行时使其如上面的项目一样的间隙排列

问题出现的平台版本及自己尝试过哪些方法

1.使用媒体查询，设置项目的百分比，无法完成预期效果，因为预期是窗口大小改变，列表每行的数量也随之变动，用媒体查询的话，没法顾及到所有宽高
2.若是设置justify-content: flex-start;，宽度百分比的话，同理随着窗口大小改变行排布数量无法改变

相关代码

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-top: 30rpx;
}

Answer 1

当初解决这个布局问题的时候，有参考了一篇张鑫旭的文章，不知是否对你有帮助。
张鑫旭

Answer 2

可以这样

.container .item:last-child{
    margin-right:auto
}

Answer 3

这种情况我用grid布局

Answer 4

Flexbox 比较适合用于处理一个维度的列表／布局；Grid更适合处理二维（行、列）的布局。
用flex布局处理你例中的列表，很难兼顾对齐问题，虽然有挺多 css 技巧能解决这个问题。但个人感觉用grid更灵活。当然了，得考虑兼容问题。
可以看看这个例子repeat()和minmax()函数实现自适应