如何使用CSS flexbox垂直对齐和拉伸内容

Question

使用CSS flexbox,如何在不使用css height属性的情况下同时将所有div的内容同时垂直居中,同时在所有div上保持相同的高度？

详细信息 - http://jsbin.com/efaCEVa/1/edit

Answer 1

HTML

<div class='outer'>
    <div class='inner'>A</div>
    <div class='inner'>B</div>
    <div class='inner'>C</div>
</div>

CSS

.outer {
    align-items: stretch;
    display: flex;
}

.inner {
    align-items: center;
    display: flex;
}