Question

如this fiddle所示，我有一组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标记。甚至我也看到这是一个丑陋的骇客，会因为驴子明显不稳定而咬我。

就我对Display Flex的经验而言，据我了解，事情很简单，或者您做错了。好吧，这并不容易...

Answer 1

对于您的rest元素（也是一个Flexbox），您应该使用align-items: center来使内部文本居中（您使用了align-self: center在rest弹性框内将outer作为 flex项居中。

请参见下面的演示

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>

垂直对齐会在flex

1 个答案: