如何让 flexbox 列的高度相同？

Question

我正试图将我的头绕在 flexbox 上，但我遇到了一个非常简单但我似乎无法正确解决的问题。

我有 6 列，我想要所有相同的高度，每行 3 列。我已将弹性项目设置为 33% 的宽度，但我没有在任何东西上设置高度。我认为一旦弹性项目有内容，它将采用高度最大的项目并将所有内容与之匹配。

这是我的标记：

.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，这是弹性容器的初始设置。它使弹性项目消耗交叉轴中的所有可用空间。

如果您检查每个弹性项目的实际大小，您会发现它们实际上在每一行上的高度相同 (demo)。

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

为了使内容拉伸到整个高度，请将display: flex 添加到每个 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>

Answer 2

尝试将“display: flex”添加到 .flexbox 并将“flex: 0 1 auto”添加到图标框以填充高度。来吧：

.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;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

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

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