センター内の特定のアイテムにフレックスを合わせる

Question

フレックスボックスで基本的なことを達成しようとしていますが、これを行う方法はわかりません。

私の目標は、3つのdivを一列に整列させ、中間のdiv（ここでは "short"とする）を中央に配置することです。 絵がより明確になるであろう：

これらのdivが中心ではなく、私は希望としてされています。私は、 "短いdiv"を中心にしたい、そして他のものを望んでいました。私がこれを逃したCSSルールはありますか？

私のコード、これまでと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/

これは純粋なフレキシボックスでは不可能である

Answer 1

ありがとう...それは仕方ありませんセンタリング作業。あなたが構造を変更することができれば、フレキシボックスは

* { 
 
    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>