我有一个简单的导航栏,我正在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中使用浮动是不好的.我正在考虑使用合理内容,并使用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技能的人,并能帮助我找到正确的方式来处理这种情况. 原文链接：https://www.f2er.com/html/230094.html