顯示柔性對齊到右側

Question

如果我正在使用

display: flex;
align-items: center;

如何將ul水平對齊到右邊？

 .navigation { display: flex; align-items: center; width: 100%; height: 80px; background: rgb(255, 255, 255); } ul { list-style: none; /*float:right;*/ } li { display: inline-block; } a { padding: 10px; width: 80px; text-decoration: none; display: block; text-align: center; } 

 <div class="navigation"> <ul> <li><a>Contacts</a></li> <li><a>About</a></li> <li><a>FAQ</a></li> <li><a>Other</a></li> </ul> </div> 

Answer 1

你可以使用justify-content: flex-end on .navigation來做到這.navigation

 .navigation { display: flex; align-items: center; justify-content: flex-end; width: 100%; height: 80px; background: rgb(255, 255, 255); } ul { list-style: none; display: flex; padding: 0; } a { padding: 10px 25px; width: 80px; text-decoration: none; text-align: center; } 

 <div class="navigation"> <ul> <li><a>Contacts</a></li> <li><a>About</a></li> <li><a>FAQ</a></li> <li><a>Other</a></li> </ul> </div> 

Answer 2

添加flex-direction: row-reverse; 到.navigation

  .navigation { display: flex; align-items: center; width: 100%; height: 80px; background: rgb(255,255,255); flex-direction: row-reverse;/* Here is what you are looking for*/ } ul { list-style:none; border:1px solid black; } li { display:inline-block; } a { padding: 10px; width: 80px; text-decoration: none; display: block; text-align: center; } 

 <div class="navigation"> <ul> <li><a>Contacts</a></li> <li><a>About</a></li> <li><a>FAQ</a></li> <li><a>Other</a></li> </ul> </div>