始终将Div3与CSS3 Flexbox对齐？

Question

我有以下HTML结构：

<div class="indicator"></div>
<div class="mainPanel">
    <div>Speichern</div>
    <div>Style</div>
    <div>Speichern</div>
</div>

mainPanel包含三个元素。中心的元素应始终位于中心，如下所示：

如果其中一本文本很长，则应以...为上限，如下所示：

有时左侧或右侧的文本大小不相等。即使在这种情况下，中间的文字也应该位于中间。

我创建了一个JSFiddle来展示我的所作所为。这是我的CSS代码（这是我创建的JSFiddle DEMO。）：

.indicator {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    width: 150px;
    height: 50px;
    border-right: 1px solid red;
    z-index: -10;
}
.mainPanel {
    width: 300px;
    height: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.mainPanel > div {
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

这是我的问题。如果右侧或左侧的文本大小不相等，则中间的文本不在中间：

这是我创建的JSFiddle DEMO。

我如何才能使中间的文本始终居中，而椭圆属性仍在起作用？

Answer 1

使用该flex属性来确定每个flex元素如何扩展/收缩将成为您的解决方案：

小提琴的例子

这是我们要添加的重要内容：

的CSS

.mainPanel > div {
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 25%; /* <-- Added */
}
.mainPanel > div:nth-child(2) {  /* <-- This whole block added */
    flex: 2 0 auto;
    max-width: 50%;
}

所以这是该flex属性告诉您有关弹性盒布局参数的内容。

例： flex: 2 0 auto

• 2–这是您的flex元素可以增长到多少个“部分”。可以使用单独设置flex-grow。
• 0–这是伸缩元素可以收缩到多少“部分”的底限。可以使用单独设置flex-shrink。
• auto– 本质上min-width是元素的。它将无法缩小到该点之外。将其设置为auto意味着我们将元素调整为其内容的大小。也可以使用属性单独设置flex-basis。