align flex mit spezifischem Gegenstand in der Mitte

Question

Ich versuche, eine grundlegende Sache mit flexbox zu erreichen, und ich weiß nicht, wie man das macht.

Mein Ziel ist es, 3 div in einer Reihe auszurichten, und die mittlere div (hier contending "short") muss zentriert werden. Als Bild wird noch deutlicher:

diese div zentriert sind, aber nicht als Ich mag würde. Ich wollte, dass das "kurze Div" zentriert und das andere herum ist. Gibt es eine CSS-Regel, die ich dafür verpasst habe?

Mein Code so weit und Jsfiddle:

<div class="box"> 
    <div class="A">whatever</div> 
    <div class="B">short</div> 
    <div class="C"> a f*cking very very very very very long content</div> 
</div> 

CSS

.box{ 
display:flex; 
flex-flox:row nowrap; 
justify-content:center; 
align-content:center; 
align-items:center; 
background-color:red; 
} 

.A{ 
border:medium solid black; 
} 
.B{ 
border:medium solid black; 
} 
.C{ 
border:medium solid black; 
} 

https://jsfiddle.net/js7hboek/

Thank

Answer 1

Das ist nicht möglich, mit reinem Flexbox ist ... das ist nicht der richtige Weg Zentrierung funktioniert. Sie Positionierung benötigen ... die Art der Punkt der Flexbox

jedoch vermeidet, wenn Sie die Struktur ändern können, Flexbox

* { 
 
    box-sizing: border-box; 
 
} 
 
.box { 
 
    display: flex; 
 
} 
 
.wrapped { 
 
    flex: 1; 
 
    border: 1px solid grey; 
 
} 
 
.A { 
 
    text-align: right; 
 
}

<div class="box"> 
 
    <div class="wrapped"> 
 
    <div class="A">whatever</div> 
 
    </div> 
 
    <div class="B">short</div> 
 
    <div class="wrapped"> 
 
    <div class="C">a very very very very very long content</div> 
 
    </div> 
 
</div>