web-dev-qa-db-ja.com

CSSを使用してコンテンツを垂直方向に整列およびストレッチする方法flexbox

CSSフレックスボックスを使用して、css height属性を使用せずに、すべてのdivのコンテンツの高さを同じに保ちながら、すべてのdivのコンテンツを同時に垂直方向に中央揃えするにはどうすればよいですか?

詳細— http://jsbin.com/efaCEVa/1/edit

22
Stephen

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;
}
21
Ben
  .item-wrapper
    display: flex
    align-items: stretch
    justify-content: center

  .item
    width: 400px
    display: flex
1
GN.