merkezde belirli bir öğeyle hizalama esnekliği

Question

Esnek kutu ile temel bir şey elde etmeye çalışıyorum ve bunu nasıl yapacağımı bilmiyorum.

Amacım üst üste 3 div hizasına sahip olmak ve orta div (burada "kısa" da olsa) ortalanmalıdır. bir resim olarak daha açık olacaktır:

bu div merkezli değil ben istiyorum gibidir. Ben "kısa div" ortalanmış ve diğer etrafında istedim. Bunun için kaçırdığım bir CSS kuralı var mı?

Benim bugüne kadar kod ve 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/

Teşekkür

Bu saf flexbox'a ile mümkün değildir

Answer 1

... bu şekilde değil merkezleme çalışmaları. Sen yapısını değiştirmek eğer, 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>