不要填满可增长的弹性容器的宽度

Question

我正在构建一个 flexbox 容器，容器宽度是可调整的，每个元素应该水平填充容器宽度并且 grow 来填充它们之间的 space，如果该行的元素太多，则另外垂直堆叠。

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

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

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

预期结果：

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

使用例如 width: 30% 代替 flex-grow 和宽度 px:

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

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

Answer 2

我认为使用 css 网格会更好：

* {
  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;
}

不要填满可增长的弹性容器的宽度

Do not fill the width of growable flex containers

css

flexbox

css-grid