居中 header 按钮但不制作它们 static/absolute

Question

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

徽标始终位于左侧，小按钮始终位于右侧，菜单按钮位于中间。我给了左边的标志：0，菜单按钮使用这段文字下面的代码，右边的小按钮：0.

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

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

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

我的第二次尝试是使用 inline-flex。这是我尝试使用的代码（应用于整个header）：

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

这里的问题是，左边的徽标比右边的小按钮宽，因为我使用 space-between，中间的按钮默认会偏心。

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

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

编辑：一位朋友建议我在右边的小按钮上添加一个不可见的元素，它的宽度正好足以让中间的按钮保持在中央。尽管这可行，但由于不可见元素，它仍然有一些白色space。

Answer 1

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

Centering header buttons while not making them static/absolute