Always Center Div with CSS3 Flexbox?

Question

I have the following HTML structure:

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

The mainPanel contains three elements. The element in the center should always be in the center as shown here:

When one of the texts is to long it should be capped with ... as shown here:

Sometime the text on the left or on the right are not of equal size. Even in this case should the text in the center be in the middle.

I created a JSFiddle to show what I did. Here is my CSS code (Here is the JSFiddle DEMO I created.):

.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;
}

Here is my problem. When the text on the right or on the left side are not of equals size then the text in the middle is not in the center:

Here is the JSFiddle DEMO I created.

How can I get the text in the middle being always in the center and still having the ellipsis property being working?

Answer 1

Using the flex property to determine how each flex element can expand/contract is going to be your solution here:

Example fiddle

Here's the important stuff that we're adding:

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%;
}

So here's what that flex property is telling you about the layout parameters of your flex box.

Example: flex: 2 0 auto

• 2 – This is how many "parts" your flex element can grow to. This can be set individually with flex-grow.
• 0 – This is the floor for how many "parts" your flex element can shrink to. This can be set individually with flex-shrink.
• auto – This is essentially the min-width for the element. It won't be able to shrink beyond that point. Setting it to auto means we size the element to its content. This can also be set individually with the property flex-basis.