使用 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 {

   width: 25%;

   max-width: 25%;

   flex: 0 0 30%;

   display: flex;

}

您会注意到，当您使用检查器工具检查元素时，large-4元素实际上都是相同的高度。不是里面的内容。因此，通过使父元素弯曲，它将使子元素填充空间。

Answer 2

您已经有了等高的列，但它们内部是一个收缩到其内容的容器。展开该容器。

.card {

    height: 100%;

}