管理多行中的CSS flex box增长以创建相等块的网格

我正在寻找一种方法，在使用

flex-growth:1

的同时，使用

flex-box

创建大小相同的盒子。通过使用以下内容定义父级，效果非常好：

display: flex;
flex-flow: row-wrap;

及其子女：

flex: 1 0 10rem;

但是，最后一行的方框宽度（取决于该行中的块数）与前一行中的方框宽度不同。在仍然使用flex grow的情况下，有没有办法解决这个问题

HTML

---

请注意，最后一行中的flex项目比上面几行大（因为该行中用于划分空间的项目较少）。

似乎如果flex grow设置为1，您已经明确声明不希望框的大小相等-当给定行中的项目较少时，您已指示它比您的flex基础更大

---

在与您的

弹性基础相同的项目上设置
最大宽度
是否达到了您的要求？看看吧。我还向flex容器添加了一个
justify content
属性；我只是在试验它是如何影响这个布局的。
这是完全可能的，但是，你必须知道你最多有多少列

解决方案
通过添加几个空的占位符，您的卡片大小相等。您只需确保添加了足够的占位符。如果太多也没关系，因为它们的高度为零，不可见

CSS
HTML

A.
B
C
D
E
F
G
H
我
J
K
我有一个类似的问题，如这把小提琴所示：。基本上，我做的是一个画廊的东西，我想有点弹性，但仍然在每行一个或两个项目之间的变化取决于什么适合。你应该接受一个答案，如果它解决了你的问题。
<section>
    <div>aaaaaaaaaaaaaaaaaaaa</div>
    <div>bbbbbbbbbbbbbbbbbbbb</div>
    <div>cccccccccccccccccccc</div>
    <div>dddddddddddddddddddd</div>
    <div>eeeeeeeeeeeeeeeeeeee</div>
    <div>ffffffffffffffffffff</div>
    <div>gggggggggggggggggggg</div>
</section>

section {
    display: flex;
    flex-flow: row wrap;
    background-color: blue;
    width: 700px;
}

div {
    background-color: red;
    height: 100px;
    flex: 1 0 200px;
}

div:nth-child(even) {
    background-color: green;
}

section {
    display: flex;
    flex-flow: row wrap;
    background-color: blue;
}

div {
    background-color: red;
    height: 3rem;
    flex: 1 0 10rem;
}

div:nth-child(even) {
    background-color: green;
}

div:empty {
    margin: 0;
    height: 0;
    border: 0;
    background: transparent;
}

<section>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
    <div>g</div>
    <div>h</div>
    <div>i</div>
    <div>j</div>
    <div>k</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>