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

Question

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

我试图calc()最后一项的负左边距，但它不能完全工作：在我的全屏浏览器上，最后两项之间的间隔超过了计算的假定1em ，然后在缩小 window 的同时，他们越来越近，直到他们接触。 随着进一步缩小，最后一个项目反弹了。

 .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%减去四个item的40em ，减去容器的两个1em padding，除以3 （四个item之间的空格）--->使用justify-content: space-between时应该或多或少的item之间的空格justify-content: space-between
• 将最后一项的左边距设置为负值是上面表达式的结果应该导致最后两项之间没有空格
• 最后一步：添加1em

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

PS：我开始知道这个差距属性，不幸的是它不会覆盖 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>