使flex父子网格列的子高度相等

我试图建立一个定价表，其中每列包含一张卡片。我希望所有牌都能伸展到其父（.col）元素的高度。使flex父子网格列的子高度相等

注：我正在使用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

来源

2017-02-27 JCraine

http://stackoverflow.com/q/33636796/3597276 –

实信息，我会书签。谢谢！ – JCraine

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

来源

2017-02-27 09:26:07

这很完美。感谢那！作为一个奖励问题，是否有可能让所有卡片在堆叠时保持相同的高度？（猜测不可能没有JS） – JCraine

看看这个[codepen]（https://codepen.io/sumi1985/pen/mWeXVV）。我就是这么想的。我使用jQuery。你需要在纯JS中获得相同的结果吗？我不知道纯CSS技术来跟踪兄弟姐妹中最大的高度。 –

感谢Sumi，这很好 - 只是好奇，如果这样的灵活功能存在。 JQuery会做。 – JCraine

只需将flex: 1加入您的card班。应该够了。而且你不需要这个班级的display: flex; align-items: stretch; flex-direction: column。

来源

2017-02-27 09:26:23 Marcin

工作，欢呼！ – JCraine

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

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

DEMO

来源

2017-02-27 09:26:38

是这个属性工作ie9 –

@Naila Flexbox或高度？ –

@Nenand flexbox属性，我认为对齐项目和弹性方向不适用于ie9 –

只是让你.card高度为100％。

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

来源

2017-02-27 09:26:39 Chaitali

添加高度：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

来源

2017-02-27 09:52:46 grinmax

使flex父子网格列的子高度相等

回答

相关问题