css - 使用 flexbox 水平居中行中的文本，两侧都有 float ？

Question

这是给大家的 CSS 谜题。

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

[btn][btn2][btn3][文本][btn4]

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

[btn][btn2][btn3][文本][btn4]

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

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

[btn][btn2][btn3][长文本导致 elli...][btn4]

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

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

Answer 1

您非常接近工作样本。我 fork 了你的 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;
}