Flexbox：有没有办法用可变数量的列指定相等的列宽？

Question

div.column-container {
  display: flex;
}

div.column-container section {
  display: flex;
  flex: 1 1 auto;
  padding: 20px;
}

section:nth-child(1) {
  background: tomato;
}

section:nth-child(2) {
  background: aqua;
}

section:nth-child(3) {
  background: purple;
}

<div class="column-container">
  <section>
    <div>
      <h2>Learn about the this</h2>
    </div>
  </section>
  <section>
    <div>
      <h2>Ask the right questions</h2>
    </div>
  </section>
  <section>
    <div>
      <h2>Download a guide with a long description</h2>
    </div>
  </section>
</div>

我知道我们可以使用：

明确定义宽度

flex: 1 1 33%;

但我只是想知道是否有办法告诉flexbox制作相同宽度的所有列，因为据我所知，flexbox元素知道它的兄弟姐妹的尺寸。

Answer 1

将元素均匀地喷洒在一行上，您只需要将1设置为flex;

div.column-container {
  display: flex;
}

div.column-container section {
  display: flex;
  flex: 1 ;/* share evenly space */
  padding: 20px;
}

section:nth-child(1), section:nth-child(4) {
  background: tomato;
}

section:nth-child(2) {
  background: aqua;
}

section:nth-child(3) {
  background: purple;
}

<div class="column-container">
  <section>
    <div>
      <h2>Learn about the this</h2>
    </div>
  </section>
  <section>
    <div>
      <h2>Ask the right questions</h2>
    </div>
  </section>
  <section>
    <div>
      <h2>Download a guide with a long description</h2>
    </div>
  </section>
</div>
<div class="column-container">
  <section>
    <div>
      <h2>Learn about the this</h2>
    </div>
  </section>
  <section>
    <div>
      <h2>Ask the right questions</h2>
    </div>
  </section>
  <section>
    <div>
      <h2>Download a guide with a long description</h2>
    </div>
  </section>
  <section>
    <div>
      <h2>Learn about the this</h2>
    </div>
  </section>
</div>

Answer 2

div.column-container {
  display: flex;
}

div.column-container section {
  display: flex;
  flex: 1 1 0;
  padding: 20px;
}

section:nth-child(1) {
  background: tomato;
}

section:nth-child(2) {
  background: aqua;
}

section:nth-child(3) {
  background: purple;
}

<div class="column-container">
  <section>
    <div>
      <h2>Learn about the this</h2>
    </div>
  </section>
  <section>
    <div>
      <h2>Ask the right questions</h2>
    </div>
  </section>
  <section>
    <div>
      <h2>Download a guide with a long description</h2>
    </div>
  </section>
</div>

解决方案是使用flex: 1 1 0代替flex: 1 1 auto。