フレックスボックスのセルフアラインが機能しない

Question

フレックスボックスを使用して簡単なナビゲーションメニューを作成しようとしています。私の問題は、align-selfを使ってメニューの右側にli.dropdown-cを配置したいということです。私は何かを試みたが、それは動作していない。誰が間違っているのか教えてもらえますか？

<nav> 
     <div class="top"> 
      <ul class="main-ul"> 
       <li><a href="#">One</a></li> 
       <li><a href="#">Two</a></li> 
       <li><a href="#">Three</a></li> 
       <li class="dropdown-c"><a href="#">Four</a> 
        <ul class="in-ul"> 
         <li><a href="#">Five</a></li> 
         <li><a href="#">Six</a></li> 
         <li><a href="#">Seven</a></li> 
         <li><a href="#">Eight</a></li> 
         <li><a href="#">Nine</a></li> 
         <li><a href="#">Ten</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </nav> 

CSS：

* { 
    padding:0px; 
    margin:0px; 
} 

body { 
    font-family: sans-serif; 
    color:lightcoral; 
    background:#506679; 
} 

ul { 
    list-style: none; 
} 

a { 
    color:grey; 
    padding:10px 20px; 
} 

.main-ul { 
    display: flex; 
    justify-content: flex-start; 
} 

li.dropdown-c { 
    display: flex; 
    align-self: flex-end; 
} 

Answer 1

整列自己のプロパティのみALIGN-内容と同じ方向のために働く、ない正当化し、コンテンツ。代わりに、li.dropdownにautoの余白を入れて、それがうまくいくはずです。

li.dropdown { 
    display: flex; 
    margin-left: auto; 
} 

また、これをcodepenでテストした結果、liを正しく選択していないことに気付きました。ドロップダウンではなく、クラスドロップダウンメニューを持っています：

li.dropdown-c { 
    display: flex; 
    margin-left: auto; 
}