如何用CSS Flex实现导航栏两组元素左右对齐？问题解决

你想要实现导航栏左侧显示2个标签、右侧显示2个标签的布局（如下图Image B），但使用Code B无法达到预期效果，原因和解决方案如下：

问题原因 #

Code B中给右侧两个<li>都添加了push-right类（对应CSSmargin-left: auto）。在Flex布局里，第一个带margin-left: auto的元素会被推到容器最右侧，第二个同样设置margin-left: auto的元素，会尝试在第一个元素的基础上继续向右挤压，但容器宽度有限，最终无法让两个元素并排显示在右侧。

正确解决方案（Code C） #

只需要给右侧第一个<li>添加push-right类即可。margin-left: auto会自动占据左侧两个元素之外的所有剩余空间，将后续的所有<li>都推到导航栏右侧，完美实现左侧2个、右侧2个的布局效果。

完整代码

<nav>
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>

    <li class="push-right"><a href="#">Page 3 is longer</a></li>
    <li ><a href="#">Page 4</a></li>
  </ul>
</nav>

nav ul {
  display: flex;
  margin: 0 -10px;
}

nav li {
  margin: 0 10px;
}

.push-right {
  margin-left: auto;
}

效果对比 #

• Image A（Code A效果）：
  
• Image B（预期效果）：
  

内容的提问来源于stack exchange，提问作者HelloCW