Question

我对 justify-content: space-between 给出的结果几乎没问题，我只是希望最后两个弹性项目之间的空间更小。

我试图为最后一项calc()设置一个负的左边距，但它并没有完全奏效：在我的浏览器全屏模式下，最后两项之间的距离超过了假定的 {{1} } 计算，然后在缩小窗口的同时，它们越来越近，直到它们接触。随着进一步缩小，最后的项目会反弹。

1em

.belt {
  display: flex;
  justify-content: space-between;
  padding: 1em;
}

.belt > * {
  min-width: 10em;
  border: solid orange;
}

.belt > button {
  margin-left: calc((42em - 100%) / 3 + 1em);
}

我的计算：

为了使计算成为可能，我必须为项目定义一个宽度，我使用了 <div class='belt'> <a href='/'>LOGO</a> <div>[_______________|Q]</div> <a href='/signin'>Sign in</a> <button>Cart</button> </div>，它也可以用作 min-width: 10em;，因为项目的内容小于 {{1 }}
width 减去四个项目的10em，减去容器的两个100% padding，除以40em（四个项目之间的空格）--- > 使用 1em
将最后一项的左边距设置为负值作为上述表达式的结果应该导致最后两项之间没有空格
最后一步：添加 3

这种方法有什么问题？在最后两项之间实现 justify-content: space-between 空格的好方法是什么？

PS：我开始知道这个 gap 属性，遗憾的是它不会覆盖 99% 的 Safari 用户，所以现在不是一个选项。

Answer 1

我认为您可以简单地在第二个项目上使用 margin:auto，在最后一个项目上使用您的 1em 边距：

.belt {
  display: flex;
  justify-content: space-between;
  padding: 1em;
}

.belt > * {
  min-width: 10em;
  border: solid orange;
}

.belt > button {
  margin-left: 1em;
}

.belt > div {
  margin:0 auto;
}

<div class='belt'>
  <a href='/'>LOGO</a>
  <div>[_______________|Q]</div>
  <a href='/signin'>Sign in</a>
  <button>Cart</button>
</div>

自定义弹性项目之间的空间

1 个答案: