Flexbox 자체 정렬이 작동하지 않습니다.

Question

flexbox를 사용하여 간단한 탐색 메뉴를 만들려고합니다. 내 문제는 여기에 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

정렬 - 자기 속성은 정렬-내용과 동일한 방향으로 작동하지 정당화-내용. 대신 li.dropdown에 auto의 왼쪽 여백을두면 작동합니다.

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

또한 코드 픈에서 이것을 테스트 한 후에도 리를 올바르게 선택하지 않는다는 것을 깨달았습니다. 드롭 다운이 아닌 클래스 드롭 다운 -C가 있습니다.

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