フレキシブルアイテムをストレッチして同時にコンテンツを垂直にセンタリングするには？

Question

私はフレックスアイテムの行を持っていて、行のある各アイテムのコンテンツを垂直方向にセンタリングしたいと思います。また、アイテムを行の最上部から最下部までストレッチして、アイテムは上から下に表示されます。これは可能ですか？今、私のマークアップは次のようになります。私はu-flex-align-items-stretch（align-items: stretchと同じもの）を追加した場合

<div class="u-flex u-height-4rem u-flex-align-items-center"> 
    <div class="u-width-25rem u-padding-left-3rem u-padding-right-3rem">u-background-color-gray-{{weight}}</div> 
    <div class="u-background-color-gray-{{weight}} u-width-100"></div> 
</div> 

品目は、底に行の先頭からストレッチませんが、今のコンテンツは、もはや垂直方向の中央です。

Answer 1

親をflexにすると、デフォルトでrow,stretchの列に子が配置されます。次に子供たちをflexにして、align-items: centerを使って内容を中央に置くことができます。実際に各列の内容に応じて、divのような要素にコンテンツをラップして、divが中央に配置され、その内部のコンテンツが正常に処理されるようにすることができます。

.u-flex, .u-flex > div { 
 
display: flex; 
 
} 
 

 
.u-flex > div { 
 
align-items: center; 
 
}

<div class="u-flex u-height-4rem u-flex-align-items-center"> 
 
    <div class="u-width-25rem u-padding-left-3rem u-padding-right-3rem" style="background:red">u-background-color-gray-{{weight}}<br>foo<br>bar<br>foo<br>bar</div> 
 
    <div class="u-background-color-gray-{{weight}} u-width-100" style="background:grey">asdf<br>asdf<br>asdfasdf<br>asdf<br>asdfasdf<br>asdf<br>asdfasdf<br>asdf<br>asdf</div> 
 
</div>