html - 将标题按钮居中而不使其成为静态/绝对

Question

我目前正在创建一个看起来有点像这样的固定 header 。

https://gyazo.com/e0bab8ba195e33110b19123c7fc3c568

Logo 始终位于左侧，小按钮始终位于右侧，菜单按钮位于中间。我给了左边的 Logo :0，使用此文本下方代码的菜单按钮，以及右边的小按钮:0。

left: 50%;
transform: translateX(-50%);

我想要发生的事情:中间的按钮始终居中，直到侧面的某个东西( Logo 或小按钮)将其推到其他位置。当条形图太小时，所有东西都会被推到右边，但这只有在所有空白都被填满时才会发生。 (此时我的移动布局将激活)

这是问题所在:当屏幕变得太小时，会发生这种情况: https://gyazo.com/044c02f056fd7d76d34cf4e1a912af45

我的第二次尝试是使用 inline-flex。这是我尝试使用的代码(应用于整个 header ):

display: inline-flex;
position: fixed;
justify-content: space-between;
flex-flow: nowrap;
white-space: nowrap;
overflow: hidden;

这里的问题是，左边的标志比右边的小按钮宽，而且因为我在中间按钮之间使用了空格，默认情况下会偏离中心。

(这张图不是很清楚，但肯定偏心了) https://gyazo.com/e9f89e7918dc1f2d3059b1938b62536d

我错过了 flex 中的某些选项吗？或者有没有更好的方法来解决这个问题？

编辑:一位 friend 建议我在右边的小按钮上添加一个不可见的元素，它的宽度刚好足以让中间的按钮保持在中央。虽然这可行，但由于不可见元素，它仍然有一些空白。

Answer 1

您可以为 Logo 和小按钮添加相等的最小宽度，这样剩余空间就会均匀分布。