Question

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

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

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

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

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

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

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

问题在于，左侧的徽标比右侧的小按钮宽，因为我使用空格 - 中间按钮默认为偏心。

（在这张照片中不是很清楚，但它们肯定是偏心的） https://gyazo.com/e9f89e7918dc1f2d3059b1938b62536d

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

编辑：朋友建议我在右侧的小按钮上添加一个不可见的元素，这个元素的宽度足以让中间按钮保持在中间位置。尽管如此，由于隐形元素，它仍然有一些空白。

Answer 1

您可以为徽标和小按钮添加相同的最小宽度，这样剩余空间均匀分布。