html - 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 元素知道它的 sibling 的尺寸。

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>