如何让 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 项目的实际大小，您会发现它们实际上每行的高度都相等（demo）。

问题是每个项目 ( .icon-box-1) 的内容没有拉伸全高。height: auto默认情况下，它只是（内容高度）。

为了让内容拉伸全高，添加display: flex到每个 flex 项目，这样align-items: stretch就会生效，就像在父项上一样（demo）。

然后使用flex: 1使内容填充主轴上的剩余空间（演示）。

.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>