Html 使网格列内的 flex 子项与父项的高度相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42481924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make flex child equal height of parent inside of grid column
提问by JCraine
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.
我正在尝试构建一个定价表，其中每列包含一张卡片。我希望所有卡片都拉伸到其父 (.col) 元素的高度。
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?
注意：我正在使用 Bootstrap 4，并尝试使用现有的网格系统（为了一致性）和这个特定的标记来实现这一点。我无法让卡片长到它们父容器的高度。使用当前的标记，这甚至可能吗？
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
这是我的笔：https: //codepen.io/anon/pen/oZXWJB
采纳答案by Sumi Straessle
Add flex-grow : 1;to your .cardrule. HTML markup is fine.
添加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;
}
You may also look at Foundation 6 Equalizerplugin. They use JavaScript though.
您还可以查看Foundation 6 Equalizer插件。不过他们使用 JavaScript。
回答by Nenad Vracar
回答by Marcin
Just add flex: 1to your cardclass. Should be enough. And you don't need display: flex; align-items: stretch; flex-direction: columnin this class.
只需添加flex: 1到您的card班级。应该够了。而你不需要display: flex; align-items: stretch; flex-direction: column在这个班级。
回答by grinmax
Add height: 100% to .card
添加高度：100% 到 .card
.card {
display: flex;
height: 100%;
padding: 20px;
background: #002732;
color: white;
opacity: 0.5;
align-items: stretch;
flex-direction: column;
}
example - https://codepen.io/anon/pen/zZGzyd
回答by Lana Kushnir
If you're using Bootstrap 4, they already have build-in classes for what you're trying to achieve.
如果您使用的是 Bootstrap 4，它们已经为您要实现的目标提供了内置类。
Add card-deckto <div class="row card-deck">
添加card-deck到<div class="row card-deck">
回答by Chaitali
Just make your .cardheight to 100%.
只要让你的.card身高达到 100%。
.card{
height: 100%;
display: flex;
padding: 20px;
background: #002732;
color: white;
opacity: 0.5;
align-items: stretch;
flex-direction: column;
}
