将flex与中心的特定项目对齐

Question

我尝试使用flexbox实现基本功能，但我不知道如何做到这一点。

我的目标是连续3个div对齐，而中间div（这里争论＆＃34;短＆＃34;）必须居中。 因为图片会更明确：

那些div是居中但不是我想要的。我想要＆＃34;短片＆＃34;以及其他周围的中心。是否有我错过的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

纯弹性箱不可能实现这一点......这不是居中工作的方式。您将需要定位......哪种类型可以避免使用flexbox

但是，如果您可以更改结构，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>