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

Question

我对@9​​87654322@ 给出的结果几乎没有问题，我只是希望最后两个弹性项目之间的空间更小。

我尝试calc()最后一项的负左边距，但它不能完全工作：在我的全屏浏览器上，最后两项之间的间隔超过了假定的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;，它也可以用作width，因为项目的内容小于10em
• 100%减去四个项目的40em，减去容器的两个1em填充，除以3（四个项目之间的空格）--->应该或多或少的项目之间的空间当使用justify-content: space-between
• 将最后一项的左边距设置为负值是上述表达式的结果应该导致最后两项之间没有空格
• 最后一步：添加1em

这种方法有什么问题，什么是在最后两项之间实现1em 空格的好方法？

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>