css - 将 flex 与中心的特定元素对齐

Question

我试图用 flexbox 实现一个基本的东西，但我不知道该怎么做。

我的目标是让 3 个 div 排成一行，中间的 div(此处包含“短”)必须居中。作为图片会更明确:

那些 div 是居中的，但不是我想要的。我希望“short 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

这对于纯 flexbox 是不可能的……那不是居中的工作方式。您将需要定位...这避免了 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>