フレックスアイテムの複数の行を垂直に中央に配置

Question

私はラッパーの子DIVを垂直に整列しようとしていますが、残念ながらそうではありません。要件は、スクリーンラッパーの全幅と高さで、子の2つが縦と横の中央に配置されたDIVです。 （div要素の高さは、ウィンドウの高さを作るためのjQueryによって処理されている）

注：

.wrapper { 
 
    width: 100%; 
 
    height:100%; 
 
    min-height:600px; /*just for example*/ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    background:#e1e1e1; 
 
} 
 
.row1 { 
 
    background: #cdcdcd; 
 
} 
 
.row2 { 
 
    background: #404040; color:#fff; 
 
}

<div class="wrapper"> 
 
    <div class="row1">This is row one</div> 
 
    <div class="row2">This is row two</div> 
 
</div>

を：私は子供DIV width:100%

をしたくないこれは私が試してみましたものです

Answer 1

フレックスコンテナの初期設定はflex-direction: rowです。これは、コンテナの子（「フレックスアイテム」）が一列に並べられることを意味します。

このデフォルトをオーバーライドするには、コンテナにflex-wrap: wrapを追加し、width: 100%という項目を指定すると、行ごとに1つの項目が作成されます。しかし、あなたはこの方法がこの場合の選択肢ではないと言っています。

もう1つの方法は、容器をflex-direction: columnに切り替えることです。

.wrapper { 
 
    width: 100%; 
 
    height:100%; 
 
    min-height:600px; /*just for example*/ 
 
    display: flex; 
 
    flex-direction: column; /* NEW */ 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    background:#e1e1e1; 
 
} 
 
.row1 { 
 
    background: #cdcdcd; 
 
} 
 
.row2 { 
 
    background: #404040; color:#fff; 
 
}

<div class="wrapper"> 
 
    <div class="row1">This is row one</div> 
 
    <div class="row2">This is row two</div> 
 
</div>