如何使用 CSS flexbox 垂直对齐和拉伸内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19063770/
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
How to vertically align and stretch content using CSS flexbox
提问by Stephen
Using CSS flexbox, how can I simultaneously vertically center the content of all divs in a row while keeping the same height on all of them without using the css heightattribute?
使用 CSS flexbox，如何在不使用 cssheight属性的情况下同时将所有 div 的内容垂直居中，同时在所有 div 上保持相同的高度？
HTML
HTML
<!DOCTYPE html>
<html>
<body>
<div class="Grid">
<div class="Grid-cell">
1<br>
1<br>
1<br>
1<br>
</div>
<div class="Grid-cell">2</div>
<div class="Grid-cell">
3<br>
3<br>
</div>
</div>
</body>
</html>
CSS:
CSS：
.Grid {
display: flex;
justify-content: center;
align-items: center;
}
.Grid-cell {
flex: 1;
text-align: center;
}
回答by Ben
HTML
HTML
<div class='outer'>
<div class='inner'>A</div>
<div class='inner'>B</div>
<div class='inner'>C</div>
</div>
CSS
CSS
.outer {
align-items: stretch;
display: flex;
}
.inner {
align-items: center;
display: flex;
}
回答by GN.
.item-wrapper
display: flex
align-items: stretch
justify-content: center
.item
width: 400px
display: flex
回答by cimmanon
There is no reason to do this with Flexbox. The table/table-cell properties have been able to do this for a long time:
没有理由对 Flexbox 这样做。table/table-cell 属性已经能够做到这一点很长一段时间了：
http://cssdeck.com/labs/qsirepkh
http://cssdeck.com/labs/qsirepkh
ul {
display: table; /* optional */
}
li {
display: table-cell;
vertical-align: middle;
}
This is what it looks like with Flexbox:
这就是 Flexbox 的样子：
http://codepen.io/cimmanon/pen/BfDAk
http://codepen.io/cimmanon/pen/BfDAk
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
li {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
