垂直对齐以弯曲方式取消拉伸 div

Question

如这把小提琴所示，我有一组div。我希望它们在可用的垂直空间上伸展，并保持其内容垂直居中。我也是flex的忠实粉丝。在下面的标记中，我卡住了。

<div class="outer">
  <div class="inner">Uno</div>
  <div class="inner">Duo</div>
</div>

使用下面的类，拉伸在那里，但文本在顶部。

.beep { align-self: stretch; ... }

当我切换到这个时，会根据需要进行居中，但拉伸消失了。

.boop { align-self: center; ... }

我

应该如何接近它以按照我想要的方式工作？我尝试在组件本身及其父组件上使用以下样式。

.blopp{
  vertical-align: middle;
  align-items: stretch;
  align-content: stretch;
}

最后，我让它工作，但使用一组可怕的亲子祖父母子子暴行作为 HTML 标记。连我都看得出来，这是一个丑陋的黑客，会咬我一口驴子，显然不稳定。

就我对显示器柔性的经验而言，我的理解是事情很容易，或者你做错了。嗯，这并不容易...

Answer 1

对于rest元素(也是一个弹性框(，您应该使用align-items: center将文本居中(您已使用align-self: center将rest居中作为outer弹性框中的弹性项目(。

请参阅下面的演示：

div.outer {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  display: flex;
  width: 100%;
  height: 101px;
  border: 3px solid pink;
}
div.inner {
  padding: 10px;
  background: lightgray;
  border: 1px solid darkgray;
  display: flex;
}
div.first {
  flex: 3;
}
div.rest {
  flex: 1;
  justify-content: flex-end;
  align-items: center; /* <-- note this */
}

<div class="outer">
  <div class="first inner">I'm the first</div>
  <div class="rest inner">we're</div>
  <div class="rest inner">the</div>
  <div class="rest inner">rest</div>
</div>