Flex CSS - 列表项的 margin-left 而不仅仅是 last-child

Question

我正在慢慢掌握 Flex，但它让我感到困惑，如何使 ul.list 中的所有 li 元素都正确浮动。我读过，为了让项目正确浮动，您只需使用 margin-left: auto 但这似乎只对最后一个项目有效，因为当我将视点调整到 1920px 以上或电子邮件和邮件之间的差距以上时电话号码增加...而顶部菜单的左侧但每个 li 元素之间的距离保持不变。

这是我的 HTML:

<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>

还有我的CSS:

.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;
}

JSFiddle:

为了让事情更简单，我已经将代码上传到 online JSfiddle，复制使 window 变大并监控手机号码和电子邮件之间的距离增加......一些东西我想停下来。

Answer 1

从最后一个 child 中删除 margin-left: auto。只放在倒数第二个child。这将迫使两个元素都向右移动。

当弹性项目 margin-left: auto 时，它会将自己推离其左侧的所有内容。在您的情况下，倒数第二个 child 是有意义的。但是对于最后的child.

没有意义

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

通过仅在倒数第二个项目上使用 margin-left: auto，您可以将两个项目打包在一起，一切都会向右移动。然后，如有必要，您可以使用常规（数字）水平边距在它们之间创建 space。

Answer 2

您想利用基础 .align-right class，它将应用 justify-content: flex-end;

https://jsfiddle.net/28btx50v/2/

Flex CSS - 列表项的 margin-left 而不仅仅是 last-child

Flex CSS - margin-left on list items not just last-child

html

css

flexbox

zurb-foundation-6