Html 使用flexbox设置等高柱

我知道一种使用

display:table

创建等高列的解决方案，如：

.row {
    display: table;
    width: 100%;
}

.col{
    display: table-cell; 
}

但我的情况有点不同，因为我使用的是flexbox，row类有

display:flex

：

.row {
  display: flex;
  display: ms-flex;
  flex-wrap: wrap;
}

所有COL都有

.large-4

等级：

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

我不能对

.large-4

使用

flex:1

，因为它在不同的视口中有所不同。 以下是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>

标题
2012-09-05，作者：Basir Payenda
Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。拟盲蝽科
区别
有选择地放弃节约，以合理的理由对腐败进行谴责
真理。

标题
2012-09-05，作者：Basir Payenda
Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。

标题
2012-09-05，作者：Basir Payenda
Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。拟盲蝽科
区别。

---

代码笔链接可以找到！如何使用flexbox实现等高柱？或者其他更好的解决方案。谢谢

您需要将

显示：flex

添加到

.large-4

元素：

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

---

当您使用inspector工具检查元素时，您会注意到，

large-4

元素实际上都是相同高度的。不是因为里面的内容。因此，通过使父元素灵活，它将使子元素填充空间。

您已经有了高度相等的列，但在这些列中有一个收缩到其内容的容器。展开那个容器

.card {
    height: 100%;
}

---

或者，如果他们使用Bootstrap 4，只需添加

d-flex

类……也可以，但是他们没有将Bootstrap列为标记，所以我使用了ol'属性：）如果你将flex basis设置为30%（指定flex项的初始大小）-不意味着她是“width:25%”值。嗨，我在回答你的旋转木马问题，但你把它删除了！哦，太好了@ariel，我以为社区不欢迎它。我要把它解开