使用 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;
}

並且所有 cols 都有.large-4類：

.large-4 {
   width: 25%;
   max-width: 25%;
  flex: 0 0 30%;
}

我也不能將flex:1用於.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%;
}