css - 不要填充可增长柔性容器的宽度

Question

我正在构建一个 flex 盒容器，容器宽度可调整大小，每个元素应水平填充容器宽度并增长以填充它们之间的空间，并另外堆叠如果该行的元素太多，则垂直。

问题是，当一行包含单个元素时，它会填充容器的整个宽度，这就是 flex-grow: 1; 规则的原因。

如果我删除 flex-grow: 1; 规则，元素将停止增长并且不会填充它们之间的空间。

我想要的是使元素可增长以填充它们之间的空间，但不要填充容器的整个宽度。

预期结果:

article{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 800px;
    border: 1px solid blue;
}
section{
    min-width: 200px;
    box-sizing: border-box;
    flex-grow: 1;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

<article>
    <section>1</section>
    <section>2</section>
    <section>3</section>
    <section>4</section>
</article>

Answer 1

我认为使用 css grid 会更好:

* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
}

article {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;

  width: 800px;
  padding: 10px;
  border: 1px solid blue;
}

section {
  padding: 10px;
  border: 1px solid black;
}