Question

我有一排flex项目，我希望每个项目的内容与行垂直居中，我也希望项目从行的顶部延伸到底部，以便背景颜色项目从上到下显示。这可能吗。现在我的标记看起来像这样：

<div class="u-flex u-height-4rem u-flex-align-items-center">
  <div class="u-width-25rem u-padding-left-3rem u-padding-right-3rem">u-background-color-gray-{{weight}}</div>
  <div class="u-background-color-gray-{{weight}} u-width-100"></div>
</div>

如果我添加u-flex-align-items-stretch（与align-items: stretch相同），则项目会从行的顶部延伸到底部，但现在内容不再垂直居中。

Answer 1

您可以制作父flex，这样可以将子项置于默认情况下row，stretch的列中。然后，您也可以生成孩子flex，并使用align-items: center将其内容置于中心位置。根据每列中内容的实际情况，您可能希望将内容包装在div之类的元素中，以便div居中并且内容中的内容得到处理通常

＆＃13;

.u-flex, .u-flex > div {
display: flex;
}

.u-flex > div {
align-items: center;
}

＆＃13;

<div class="u-flex u-height-4rem u-flex-align-items-center">
  <div class="u-width-25rem u-padding-left-3rem u-padding-right-3rem" style="background:red">u-background-color-gray-{{weight}}<br>foo<br>bar<br>foo<br>bar</div>
  <div class="u-background-color-gray-{{weight}} u-width-100" style="background:grey">asdf<br>asdf<br>asdfasdf<br>asdf<br>asdfasdf<br>asdf<br>asdfasdf<br>asdf<br>asdf</div>
</div>

＆＃13;

让弹性项目同时拉伸和垂直居中？

1 个答案: