フレックス方向を使用して異なる高さの垂直中心のコンテンツ：列

Question

flex-direction: columnを使用してレイアウトを作成しようとしましたが、divの高さがそれぞれ異なります。同じフレックスボックスの親を共有するdivに異なる高さを指定すると、垂直方向の配置が消えることがわかります。

私はalign-items、align-content、justify-contentを使用していないすべての種類の組み合わせを試しました。私はflex-growを高さルールの代わりに使用しましたが、これも効果がありません。私が垂直に中心にコンテンツを得ることができる唯一の方法は、アイテムをすべて同じ相対的な高さにする場合です。

header { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    text-align: center; 
 
    height: 40em; 
 
    background-color: #badabf; 
 
} 
 

 
.site-title { 
 
    height: 32em; 
 
    background-color: #DEA5A4; 
 
} 
 

 
.site-navigation { 
 
    height: 8em; 
 
    background-color: #AEC6CF; 
 
}

<header> 
 
    <div class="site-title"> 
 
    <h1> I am a page title </h1> 
 
    <img src="http://www.nintendo.com/images/social/fb-400x400.jpg" width="100" height="100"> 
 
    </div> 
 
    <nav class="site-navigation"> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">History</a></li> 
 
     <li><a href="#">Events</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Here is my issue.

私は効果的に私はおそらくフレキシボックスなしでレイアウトを作成するに戻りますフレキシボックスを使用する方法の良い理解を得ることができるまで。私は本当にすぐにそれを使用したい、私は持っているこの問題にもかかわらず、はるかに少ないハッキリ感じる。

Answer 1

フレックスフォーマットコンテキストの有効範囲は、親子関係です。

つまり、フレックスレイアウトは、フレックスコンテナとその子の間にのみ存在します。

子供以外の子孫はフレックスレイアウトに参加しません。

対象とする要素はフレックスアイテム（.site-title）の子であるため、フレックスプロパティは適用されません。

フレックスアイテムをフレックスコンテナに入れて、フレックスプロパティをHTML構造内でより深く扱う必要があります。

header { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    text-align: center; 
 
    height: 40em; 
 
    background-color: #badabf; 
 
} 
 

 
.site-title { 
 
    height: 32em; 
 
    background-color: #DEA5A4; 
 
    display: flex;     /* NEW */ 
 
    flex-direction: column;  /* NEW */ 
 
    align-items: center;   /* NEW */ 
 
    justify-content: center;  /* NEW */ 
 
} 
 

 
.site-navigation { 
 
    height: 8em; 
 
    background-color: #AEC6CF; 
 
}

<header> 
 
    <div class="site-title"> 
 
    <h1> I am a page title </h1> 
 
    <img src="http://www.nintendo.com/images/social/fb-400x400.jpg" width="100" height="100"> 
 
    </div> 
 
    <nav class="site-navigation"> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">History</a></li> 
 
     <li><a href="#">Events</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>