使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

将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 2

只需将flex: 1添加到card课程即可。应该够了。在这堂课中你不需要display: flex; align-items: stretch; flex-direction: column。

Answer 3

您只需在height: 100%

上添加.card即可

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

DEMO

Answer 4

添加高度：100％到.card

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

示例 - https://codepen.io/anon/pen/zZGzyd

Answer 5

只需将.card高度设为100％即可。

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

Answer 6

如果您使用的是Bootstrap 4，它们已经具有您要实现的内置类。

将card-deck添加到<div class="row card-deck">