Ситуация:
У меня есть простая панель навигации, которую я создаю в Flexbox. Я хочу поместить один элемент влево и держать остальных привязанными вправо.
Пример:
<nav>
<ul class="primary-nav">
<li><a href="#" id="item1">ListItem1</a></li>
<li><a href="#" id="item2">ListItem2</a></li>
<li><a href="#" id="item3">ListItem3</a></li>
<li><a href="#" id="item4">ListItem4</a></li>
</ul>
</nav>
Проблема
Обычно ответы включают только плавающие элементы слева и справа, но предположительно в Flexbox плохо использовать Floats. Я думал об использовании justify-content и использовании flex-start и flex-end, но это не слишком хорошо работает.
Я попытался применить flex-start к первому элементу, а затем перейти к другим, но это не сработало.
Как и так:
.primary-nav #item1 {
justify-content: flex-start;
}
.primary-nav #item2 {
justify-content: flex-end;
}
.primary-nav #item3 {
justify-content: flex-end;
}
.primary-nav #item4 {
justify-content: flex-end;
}
Хвалите и благодарите любого, кто обладает навыками Flexbox, и может помочь показать мне правильный способ справиться с этой ситуацией.:)