Html Flex CSS-列表项上的左边距不只是最后一个子项

我正在慢慢地掌握Flex，但它让我困惑了如何才能使ul.list中的所有li元素都正确浮动。我已经读到，为了使项目向右浮动，您只需使用

margin left:auto

，但这似乎只在最后一个项目上正确工作，因为当我将视点调整到1920px以上或以上时，电子邮件和电话号码之间的间隔会增加。。。虽然顶部菜单的左侧，但每个li元素之间的距离保持不变

这是我的HTML：

JSFiddle：

---

为了让事情变得更简单，我已经将代码上传到了a，复制使窗口变大，并监控手机号码和电子邮件之间的距离增加。。。我想停止的内容。

从最后一个子项中删除

左边距：auto

。只放在倒数第二个孩子身上。这将迫使两个元素向右移动

当flex项目具有

左边距：auto

时，它会将自己推离左侧的所有内容。对你来说，这对倒数第二个孩子来说是有意义的。但这对最后一个孩子来说毫无意义

这就是为什么当你加宽屏幕时，两者之间的距离会更大

---

通过仅在倒数第二个项目上使用

marginleft:auto

，您可以将两个项目打包在一起，所有内容都会向右移动。然后，如有必要，您可以使用常规（数字）水平边距在它们之间创建空间。

从最后一个子项中删除

左侧边距：auto

。只放在倒数第二个孩子身上。这将迫使两个元素向右移动

当flex项目具有

左边距：auto

时，它会将自己推离左侧的所有内容。对你来说，这对倒数第二个孩子来说是有意义的。但这对最后一个孩子来说毫无意义

这就是为什么当你加宽屏幕时，两者之间的距离会更大

---

通过仅在倒数第二个项目上使用

marginleft:auto

，您可以将两个项目打包在一起，所有内容都会向右移动。然后，如果需要的话，可以使用规则的（数字）水平边距来创建它们之间的空间。

希望利用基础<代码>。对齐右< /代码>类，这将应用<代码>对齐内容：Flex结尾；<代码>

---

您希望使用基础<代码>。对齐右< /代码>类，它将应用<代码>正当化内容：Flex结尾；<代码>

---

嗨@Michael\B是的，谢谢你。。。你的方法是有效的，但我接受了另一个Michael的答案，纯粹是因为它使用已经内置的类来服务于这个过程。谢谢你抽出时间。；你好@Michael_B是的，谢谢你。。。你的方法是有效的，但我接受了另一个Michael的答案，纯粹是因为它使用已经内置的类来服务于这个过程。谢谢你抽出时间。；

<header class="ProMenu">
  <nav class="row align-middle expanded">
    <div class="small-12 medium-4 columns Links">
      <ul class="menu">
        <li><a href="#" title="">Link 1</a></li>
        <li><a href="#" title="">Link 2</a></li>
        <li><a href="#" title="">Link 3</a></li>
      </ul>
    </div>
    <div class="medium-4 columns Logo">
      <a href="" title=""><img src="https://placehold.it/64x42" alt=""></a>
    </div>
    <div class="medium-4 columns Contact">
      <ul class="menu">
        <li><a href="tel:" title="">Phone: 0777123456</a></li>
        <li><a href="mailto:" title="">Email: jog@blogs.com</a></li>
      </ul>
    </div> 
  </nav>
</header>

.ProMenu {
    background: #0071c5;
    width: 100%;
}
.ProMenu .row {
    min-height: 60px;
    max-width: 100%;
}
.ProMenu ul li a {
    color: #FFF;
}
.ProMenu .Logo {
    text-align: center;
}
.Contact ul li{
    margin-left: auto;
}