ネストされたフレックスボックス、アライメントアイテムがフレックスエンドでない

Question

私はflex-endの下にナビゲーションを配置しようとしています。 何が原因で下部に配置されていないのか分かりません。私はそれを避けようと絶対的な立場でそれを置くことができることを知っている。あなたのコードで

code is on jsfiddle

<header> 
    <div class="header__logo"> 
    <a href=""></a> 
    </div> 
    <nav> 
    <ul> 
     <li><a href="#">one</a></li> 
     <li><a href="#">two</a></li> 
     <li><a href="#">three</a></li> 
     <li><a href="#">four</a></li> 
    </ul> 
    </nav> 
    <div class="search"></div> 
</header> 

header { 
    background: deepskyblue; 
    display: flex; 
    padding: 20px 0; 
    .header__logo { 
    background: aqua; 
    flex: 20%; 
    min-height: 140px; 
    } 
    nav { 
    background: #111; 
    flex: 78%; 
    ul { 
     list-style: none; 
     margin: 0; 
     background: aquamarine; 
     display: flex; 
     justify-content: flex-end; 
      align-items: flex-end; 
    } 
    a { 
     text-decoration: none; 
     display: block; 
     padding: 1em; 
     color: white; 
    } 
    } 
    .search { 
    background: #fff; 
    flex: 12%; 
    } 
} 

Answer 1

、あなたが実際にalign-items:flex-endと下部にnavを置いていません。リストの項目は、ulの下部に配置しています。 ulコンテナを除き

には追加の高さを持っていないので、リスト項目はどこにも行かない。

にdemo with height added

navをボトム揃え、それをalign-self: flex-endを与えるので、それは大きな内整列しますフレックスコンテナ。 ;そのための `感謝フレックスエンド：

revised fiddle