如何让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容器的初始设置。它使弹性项目消耗十字轴中的所有可用空间。

如果检查每个弹性项目的实际大小，您会发现它们实际上在每一行（demo）上都是相等的高度。

问题是每个项目（.icon-box-1）的内容未达到全高。默认情况下，它只是height: auto（内容高度）。

为了让内容伸展到最大高度，请为每个弹性项添加display: flex，以便align-items: stretch生效，就像在父级（demo）上一样。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>