使flex子级在grid列内等于父级

Question

我正在尝试构建一个定价表,其中每列包含一张卡片.我希望所有卡片都伸展到其父(.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

你只需要height: 100%添加.card

.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  height: 100%;
}

演示版

Answer 2

添加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。

Answer 3

只需添加flex: 1到您的card班级即可。应该够了。display: flex; align-items: stretch; flex-direction: column而你在这堂课上不需要。