Позиционирование элементов внутри панели навигации

Question

Я имею вопрос с позицией элемента внутри навигационного меню:

<header class="main-header"> 
    <a href="" class="logo"><img src="https://www.paypalobjects.com/webstatic/i/logo/rebrand/ppcom.svg" alt="Paypal logo" /></a> 
    <nav class="main-nav"> 
    <ul> 
     <li><a href="">Buy</a></li> 
     <li><a href="">Sell</a></li> 
     <li><a href="">Send</a></li> 
     <li><a href="">Business</a></li> 
    </ul> 
    </nav> 
    <div class="button"> 
    <a href="#" class="">Log in</a> 
    <a href="#">Sign up</a> 
    </div> 
</header> 

div.button является элементом, что у меня проблема с. Я использовал flex для размещения элементов внутри заголовка. Но у меня проблема с положением div.button, я не могу поместить его вправо. Я вставил проставку влево, чтобы переместить ее, но это просто плохое решение.

Вы можете проверить свою работу в CodePen: http://codepen.io/marcvs/pen/JRmQjx

Я новичок, когда дело доходит до веб-разработки.

Answer 1

Там нет реального justify-child вариант, но вы можете использовать margin-left: auto; трюк:

.button { 
    display: flex; 
    margin-left: auto; 
} 

Кроме того, связанный: How to justify a single flexbox item (override justify-content)

Answer 2

Попробуйте это,

.button { 
    display: flex; 
    position: absolute; 
    right: 0px; 
} 

Answer 3

попробовать это.
гибкий дисплей - это гибкая компоновка.
Давая правильное значение в процентах, оно также реагирует на приложение.

.button { 
 
    display:flex; 
 
    position:absolute; 
 
    right:3%; 
 
}

<div class="button"> 
 
    <a href="#" class="">Log in</a> 
 
    <a href="#">Sign up</a> 
 
</div>