使flex子代等于网格列内父代的高度 [英] Make flex child equal height of parent inside of grid column

问题描述

我正在尝试建立一个定价表，其中每一列都包含一张卡片。我希望所有卡片都延伸到其父元素（.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> 
  

这是我的笔：

解决方案

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

  .row {
 display：flex; 
 flex-flow：行换行； 
背景：＃00e1ff; 
保证金：-8px； 
} 
 .col {
 display：flex; 
 flex：1 0 400px; 
 flex-flow：列; 
保证金：10px； 
背景：灰色； 
} 
 .card {
 display：flex; 
 padding：20px; 
背景：＃002732； 
颜色：白色； 
不透明度：0.5； 
 align-items：拉伸； 
 flex-direction：列; 
 flex-grow：1; 
} 
  

您还可以查看 Foundation 6 Equalizer 插件。他们虽然使用JavaScript。

I'm trying to build a pricing table where each column contains a card. I want all cards to stretch to the height of their parent (.col) elements.

Note: I'm using Bootstrap 4, and trying to achieve this with the existing grid system (for the sake of consistency) and with this particular piece of markup. I can't get the cards to grow to the height of their parent containers. Is this even possible with the current markup?

The basic markup is this:

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

Here is my pen: https://codepen.io/anon/pen/oZXWJB

解决方案

Add flex-grow : 1; to your .card rule. HTML markup is fine.

.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;
}

You may also look at Foundation 6 Equalizer plugin. They use JavaScript though.

这篇关于使flex子代等于网格列内父代的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！