在弹性列表项之间设置空格[重复]答案

【问题标题】：Set space-between between flex list items [duplicate]在弹性列表项之间设置空格[重复]
【发布时间】：2021-01-27 17:09:50
【问题描述】：

我有一个导航，看起来有点像下面的这个，li 里面的项目是flex 项目。此菜单是从外部呈现的，我无法将任何项目包装在专用容器内。

我想要实现的是在最后一项和左侧的其他项之间设置space-between。我尝试在最后一个孩子上使用margin-left，但这不是最好的解决方案。

是否有一个 CSS 选项可以以某种方式“包装”最后一个项目，所以在那个项目和左边的项目之间总是有空间？

.container {
  max-width: 1000px;
  background-color: lightblue;
}

ul {
  display: flex;
  justify-content: space-between;
}

.last {
  background: red;
}

<div class="container">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li class="last">Last Item</li>
  </ul>
</div>

【问题讨论】：

你为什么称margin-left解决方案为“不是最好的”？这是一个很好的做法，经常用于此类任务。
保证金解决方案不错：medium.com/@iamryanyu/…
是的，我知道，但是由于不同显示器尺寸的屏幕宽度会有所不同 - 有边距我不能让它一直粘在左边
你需要 margin-left:auto 在最后一个孩子上（不需要额外的包装）

标签： html css flexbox

【解决方案1】：

在最后一个元素上使用margin-left 是一个很好的解决方案。但是，您可以使用:last-child 选择器改进您的实现：

ul li:last-child {
  margin-left: 10px;
}

而不是手动将last 类分配给最后一个孩子。

编辑：如果您的意思是希望您的最后一个孩子一直向右对齐。您可以将它们分成不同的列表，并使用justify-content: space-between：

.container {
  max-width: 1000px;
  background-color: lightblue;
  display: flex;
  justify-content: space-between;
}

ul {
  display: flex;
}

ul li {
  width: 3rem;
}

.right li {
  background-color: red;
}

<div class="container">
  <ul class="left">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  <ul class="right">
    <li>Item</li>
  </ul>
</div>

【讨论】：