Html 将 CSS flex 元素的高度设置为相同的数量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22673701/
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
Set height of CSS flex elements to the same amount?
提问by user3420034
I have 2 divs next to each other that I center vertically and horizontally using flex and justify-content/align-items.
我有 2 个相邻的 div，我使用 flex 和 justify-content/align-items 将它们垂直和水平居中。
Example HTML:
示例 HTML：
<div class="inner">
<div class="section green">
<img src="http://i.imgur.com/hEOMgVf.png">
</div>
<div class="section red">
<img src="http://i.imgur.com/nEybO1g.png">
</div>
</div>
CSS:
CSS：
.inner {
float: left;
width: 500px;
display: flex;
justify-content: center;
align-items: center;
background-color: #343434;
text-align: center;
}
.section {
float: left;
flex: 1;
}
.green { background-color: #7dc242; }
.red { background-color: #ed1c24; }
My issue is that I need to set the height of both 'section' divs to the same as well as centering them vertically and horizontally. You can see in the JSFiddle below that the green background isn't the same height as the red. How can I make both divs the full height of the container div?
我的问题是我需要将两个“部分”div 的高度设置为相同，并将它们垂直和水平居中。您可以在下面的 JSFiddle 中看到绿色背景与红色背景的高度不同。如何使两个 div 成为容器 div 的全高？
Here's a simplified JSFiddle of what I have: http://jsfiddle.net/beK28/1/
这是我拥有的简化的 JSFiddle：http: //jsfiddle.net/beK28/1/
回答by skyline3000
To achieve the effect you want, you shouldn't try to do any of the alignment in the container element and instead should set .sectionto also be display:flex. Then you can justify and center the images correctly within the children elements.
为了达到你想要的效果，你不应该尝试在容器元素中做任何对齐，而应该设置.section为也display:flex。然后，您可以在子元素中正确对齐和居中图像。
.section {
align-items: center;
display: flex;
flex: 1;
justify-content:center;
text-align: center;
}
You also don't need to use float, that's the whole point of using flexible containers.
您也不需要使用浮动，这就是使用灵活容器的全部意义。
回答by cimmanon
Your elements aren't stretching vertically anymore because you've set align-items: center. If you want them to be equal height, it has to be the default value of stretch. If your elements were multi-line, then you could use align-content: centerinstead, which will give you the effect you're looking for. For single-line flex items, it does not appear that you can have vertical centering + equal height through Flexbox alone.
您的元素不再垂直拉伸，因为您已经设置了align-items: center. 如果你想让它们等高，它必须是拉伸的默认值。如果您的元素是多行的，那么您可以align-content: center改为使用，这将为您提供您正在寻找的效果。对于单行 Flex 项目，您似乎无法单独通过 Flexbox 实现垂直居中 + 等高。
.inner {
float: left;
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
background-color: #343434;
text-align: center;
height: 500px;
}
Note, however, that you canhave flex items with the display property of table-cell.
但是请注意，您可以拥有具有 table-cell 显示属性的弹性项目。
.inner {
float: left;
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: #343434;
text-align: center;
height: 500px;
}
.section {
display: table-cell;
flex: 1;
}
回答by agrm
I've had problems with stretch/centering before, and ended up formatting as display: table-cell:
我之前在拉伸/居中时遇到过问题，最终格式化为display: table-cell：
.inner {
float: left;
width: 500px;
display: table;
background-color: #343434;
text-align: center;
}
.section {
display: table-cell;
width: 50%;
vertical-align: middle;
}
