Показать прогибается Выровнять справа

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 на .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>