在行中水平居中文本，两侧浮动，带有flexbox？

Question

这是一个为大家准备的 CSS 拼图。

我在 我的布局 中使用了 flexbox。我有一个标题，左侧有几个按钮，中间有一些文本，右侧有另一个按钮。这是一个ASCII绘图：

[btn][btn2][btn3][ text ][btn4]

不幸的是，这看起来很奇怪，因为文本不在标题中居中。 我真正想要的是这样的：

[btn][btn2][btn3][ text ][btn4]

理想情况下，我想继续使用 flexbox 来实现这一点，因为它使大部分水平布局变得非常容易，但如果需要，我愿意回退到浮动和/或定位。

绝对定位文本元素的一个问题是长文本会在侧面的按钮下方/重叠。我目前使用 text-overflow: ellipsis 并且作为奖励，如果可能的话，我很乐意继续：

[btn][btn2][btn3][ long text causes elli... ][btn4]

如果有帮助，我也可以添加额外的容器元素。或许有办法解决这个问题，在容器中添加左键和右键，然后确保这些容器的宽度始终相同？

编辑：我认为我通过this CodePen 朝着正确的方向迈出了一步。它正确地使文本居中。唯一的缺点是 h1 需要固定或百分比宽度，如果该宽度比可用空间宽，它似乎只是与相邻元素重叠。

Answer 1

您非常接近工作样本。我用一个不需要任何宽度的解决方案来分叉你的CodePen。它使用flex 的力量来定位元素。

H1 将始终位于中间，宽度与周围的left-btns和right-btns 相同，使用flex: 1; 当然，您可以像以前一样将 H1 指定为固定宽度，或者将其设置为例如 flex: 2; 以使其占用 50% 的空间而不是 33%。

Here's the fork on CodePen.我已经删除了不必要的代码。

还有代码：

HTML

<div class="wrapper">
    <div class="left-btns">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <h1>center me! center me! center me! test woah asdf veasdf veasdf veasdf veasdf ve</h1>
    <div class="right-btns">
        <div class="box"></div>
    </div>
</div>
<h1>center me!</h1>

CSS

.wrapper {
    background: green;
    display: flex;
    margin: 5px;
}

h1 {
    flex: 1;
    text-align: center;
    margin: 5px;
    background: yellow;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: noWrap;
}

.box {
    width: 50px;
    height: 50px;
    margin: 1px;
    background: red;
}

.left-btns,
.right-btns {
    margin: 5px;
    display: flex;
    flex: 1;
    background: blue;
}

.right-btns {
    justify-content: flex-end;
}