Flexbox - 在同一条线上向左和向右对齐

Question

情况:

我有一个简单的导航栏,我正在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应用于第一个项目,然后将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> 

Answer 2

不需要保证金黑客或伪元素.

只需在Flex容器中创建一个分区,并使Flex容器之间的空间对齐.

在第一个分区内,您将放置左侧的项目,在第二个分区内放置您将在右侧的项目.

nav.menu{
    display: flex;
    justify-content: space-between;
}
nav.menu ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
nav.menu ul li{
    display: inline-block;
}

<nav class="menu">
    <ul class="menu-left">
        <li><a href="#">HOME</a></li>
        <li><a href="#">SERVICES</a></li>
    </ul>
    <ul class="menu-right">
        <li><a href="#">MEMBERS</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">PROFILE</a></li>
    </ul>
</nav>

Answer 3

您可以在正确的位置插入伪元素,并使其增长以填充可用空间.

.primary-nav::after {
  content: '';
  flex-grow: 1;
  order: 0;
}
.right {
  order: 1;
}

.primary-nav {
  display: flex;
  list-style-type: none;
  padding: 0;
}
.primary-nav::after {
  content: '';
  flex-grow: 1;
  order: 0;
}
.right {
  order: 1;
}
.left, .right {
  border: 1px solid;
  padding: 0 5px;
}

<ul class="primary-nav">
  <li class="left">Left 1</li>
  <li class="right">Right 1</li>
  <li class="right">Right 2</li>
  <li class="right">Right 3</li>
</ul>
<ul class="primary-nav">
  <li class="left">Left 1</li>
  <li class="left">Left 2</li>
  <li class="right">Right 1</li>
  <li class="right">Right 2</li>
</ul>
<ul class="primary-nav">
  <li class="left">Left 1</li>
  <li class="left">Left 2</li>
  <li class="left">Left 3</li>
  <li class="right">Right 1</li>
</ul>
<ul class="primary-nav">
  <li class="left">Left 1</li>
  <li class="right">Right 1</li>
  <li class="left">Left 2</li>
  <li class="right">Right 2</li>
  <li class="left">Left 3</li>
  <li class="right">Right 3</li>
</ul>