使用 Flexbox 设置等高列

Question

我知道一个使用以下方法创建等高列的解决方案display:table：

.row {

    display: table;

    width: 100%;

}

.col{

    display: table-cell; 

}

但我的情况有点不同，因为我使用的是 flexbox 并且 row 类有display:flex：

.row {

  display: flex;

  display: ms-flex;

  flex-wrap: wrap;

}

所有的列都有.large-4类：

.large-4 {

   width: 25%;

   max-width: 25%;

  flex: 0 0 30%;

}

我也不能使用flex:1for ，因为它在不同的视口中有所不同。.large-4这是一个 html 片段：

<div class="row">

  <div class="large-4">

    <div class="card">

      <img src="https://picsum.photos/200/200" alt="author">

      <div class="card-content">

        <h1 class="card-title">Title</h1>

        <p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>

        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste

          distinctio

          optio vel aliquam provident, ipsa reprehenderit in corrupti quia ratione quisquam amet veniam totam

          veritatis.

        </p>

      </div>

    </div>

  </div>

  <div class="large-4">

    <div class="card">

      <img src="https://picsum.photos/200/200" alt="author">

      <div class="card-content">

        <h1 class="card-title">Title</h1>

        <p class="grey-text mgb-0">2012-09-05, by Basir Payenda</p>

        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.

        </p>

      </div>

    </div>

  </div>

  <div class="large-4">

    <div class="card">

      <img src="https://picsum.photos/200/200" alt="author">

      <div class="card-content">

        <h1 class="card-title">Title</h1>

        <p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>

        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste

          distinctio.

        </p>

      </div>

    </div>

  </div>

</div>

代码笔链接可以在这里找到！如何使用 Flexbox 实现等高列？或任何其他更好的解决方案。谢谢

Answer 1

您需要添加display: flex到.large-4元素：.large-4 {&nbsp; &nbsp;width: 25%;&nbsp; &nbsp;max-width: 25%;&nbsp; &nbsp;flex: 0 0 30%;&nbsp; &nbsp;display: flex;}您会注意到，当您使用检查器工具检查元素时，large-4元素实际上都是相同的高度。不是里面的内容。因此，通过使父元素弯曲，它将使子元素填充空间。

Answer 2

您已经有了等高的列，但它们内部是一个收缩到其内容的容器。展开该容器。.card {&nbsp; &nbsp; height: 100%;}