html - 使 flex child 等于网格列内父级的高度

Question

我正在尝试构建一个定价表，其中每一列都包含一张卡片。我希望所有卡片都拉伸(stretch)到其父 (.col) 元素的高度。

注意:我正在使用 Bootstrap 4，并尝试使用现有的网格系统(为了保持一致性)和这个特定的标记来实现这一点。我无法让卡片增长到其父容器的高度。这甚至可以用当前的标记实现吗？

基本标记是这样的:

<div class="row">
    <div class="col">
        <div class="card">
          blah
          blah
          blah
        </div>
        <div class="card">
          blah
        </div>
        <div class="card">
          blah
        </div>
    </div>
</div>

这是我的笔:https://codepen.io/anon/pen/oZXWJB

Answer 1

将 flex-grow : 1; 添加到您的 .card 规则中。 HTML 标记很好。

.row {
  display: flex; 
  flex-flow: row wrap; 
  background: #00e1ff;
  margin: -8px;
}
.col { 
  display: flex; 
  flex: 1 0 400px;
  flex-flow: column; 
  margin: 10px;
  background: grey;
}
.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  flex-grow: 1;
}

您还可以查看 Foundation 6 Equalizer插入。不过他们使用 JavaScript。