html - 如何让 flexbox 列的高度相同？

Question

我正在努力研究 flexbox，但我遇到了一些非常简单但似乎无法正确解决的问题。

我有 6 列，我希望它们的高度都相同，每行 3 列。我已将 flex 元素的宽度设置为 33%，但我没有设置任何高度。我认为一旦 flex 元素有了内容，它就会选择高度最大的元素并将所有内容与之匹配。

这是我的标记:

.container {
  width: 800px;
  padding: 0 15px;
}

.row-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: -15px;
  margin-left: -15px;
  flex-wrap: wrap;
}

.flexbox {
  flex: 0 0 33%;
  padding: 0 15px;
}

.icon-box-1 {
  position: relative;
  margin-bottom: 50px;
  background: #fff;
  text-align: center;
  border: 1px solid #eee;
  padding: 10px;
}

<div class="container">
  <div class="row-flex">
    <div class="flexbox">
      <div class="icon-box-1">
        <h1>
          One
        </h1>
        <h3>Title</h3>
        <p>lots of random text, lots of random text, lots of random text, lots of random text</p>
      </div>
    </div>
    <div class="flexbox">
      <div class="icon-box-1">
        <h1>
          Two
        </h1>
        <h3>Title</h3>
        <p>lots of random text</p>
      </div>
    </div>
    <div class="flexbox">
      <div class="icon-box-1">
        <h1>
          Three
        </h1>
        <h3>Title</h3>
        <p>lots of random text, lots of random text, lots of random text, lots of random text</p>
      </div>
    </div>
    <div class="flexbox">
      <div class="icon-box-1">
        <h1>
          Four
        </h1>
        <h3>Title</h3>
        <p>lots of random text, lots of random text, lots of random text</p>
      </div>
    </div>
    <div class="flexbox">
      <div class="icon-box-1">
        <h1>
          Five
        </h1>
        <h3>Title</h3>
        <p>lots of random text, lots of random text, lots of random text</p>
      </div>
    </div>
    <div class="flexbox">
      <div class="icon-box-1">
        <h1>
          Six
        </h1>
        <h3>Title</h3>
        <p>lots of random text, lots of random text, lots of random text</p>
      </div>
    </div>
  </div>
</div>

Answer 1

等高列的特性来自于 align-items: stretch，这是一个在 flex 容器上的初始设置。它使 flex 元素占用横轴中的所有可用空间。

如果您检查每个 flex 元素的实际大小，您会发现它们实际上每行的高度相同 ( demo )。

问题是每个元素 (.icon-box-1) 的内容都没有完全拉伸(stretch)。默认情况下，它只是 height: auto(内容高度)。

为了让内容拉伸(stretch)到全高，给每个 flex 元素添加display: flex，这样align-items: stretch就生效了，就像在父级上一样(demo)。

然后使用 flex: 1 使内容填充主轴 ( demo ) 上的剩余空间。

.container {
  width: 800px;
  padding: 0 15px;
}

.row-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: -15px;
  margin-left: -15px;
  flex-wrap: wrap;
}

.flexbox {
  flex: 0 0 33%;
  padding: 0 15px;
  border: 1px dashed red; /* for illustration */
  display: flex; /* new */
}

.icon-box-1 {
  flex: 1; /* NEW */
  position: relative;
  margin-bottom: 50px;
  background: #fff;
  text-align: center;
  border: 1px solid #eee;
  padding: 10px;
}

<div class="container">
  <div class="row-flex">
    <div class="flexbox">
      <div class="icon-box-1">
        <h1>
          One
        </h1>
        <h3>Title</h3>
        <p>lots of random text, lots of random text, lots of random text, lots of random text</p>
      </div>
    </div>
    <div class="flexbox">
      <div class="icon-box-1">
        <h1>
          Two
        </h1>
        <h3>Title</h3>
        <p>lots of random text</p>
      </div>
    </div>
    <div class="flexbox">
      <div class="icon-box-1">
        <h1>
          Three
        </h1>
        <h3>Title</h3>
        <p>lots of random text, lots of random text, lots of random text, lots of random text</p>
      </div>
    </div>
    <div class="flexbox">
      <div class="icon-box-1">
        <h1>
          Four
        </h1>
        <h3>Title</h3>
        <p>lots of random text, lots of random text, lots of random text</p>
      </div>
    </div>
    <div class="flexbox">
      <div class="icon-box-1">
        <h1>
          Five
        </h1>
        <h3>Title</h3>
        <p>lots of random text, lots of random text, lots of random text</p>
      </div>
    </div>
    <div class="flexbox">
      <div class="icon-box-1">
        <h1>
          Six
        </h1>
        <h3>Title</h3>
        <p>lots of random text, lots of random text, lots of random text</p>
      </div>
    </div>
  </div>
</div>