html - Flexbox - 在同一行左右对齐

Question

情况:

我有一个在 Flexbox 中构建的简单导航栏。我想将一项 float 到左侧，而将其他元素固定在右侧。

示例:

<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 应用于第一个元素，然后将 flex-end 应用于其他元素，但效果不佳。

像这样:

.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 技能并能帮助我展示处理这种情况的正确方法的人。 :)

Answer 1

如果您希望只有一个元素位于左侧而所有其他元素位于右侧，最简单的解决方案是在父元素上使用 justify-content:flex-end 来移动所有元素右边的元素，然后将 margin-right:auto 添加到您想要在左边的元素

.primary-nav {
    display:-webkit-flex;
    display:flex;
    list-style-type:none;
    padding:0;
    justify-content:flex-end;
}

.left {
    margin-right:auto;
}

<nav>
  <ul class="primary-nav">
    <li class="left"><a href="#">ListItem1</a></li>
    <li class="right"><a href="#">ListItem2</a></li>
    <li class="right"><a href="#">ListItem3</a></li>
    <li class="right"><a href="#">ListItem4</a></li>
  </ul>
</nav>