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

【问题标题】：Getting flex items to stretch and vertically center content at the same time?让弹性项目同时拉伸和垂直居中内容？
【发布时间】：2017-06-27 23:01:08
【问题描述】：

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

<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 相同），项目会从行的顶部延伸到底部，但现在内容不再垂直居中。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以将父级设为flex，默认情况下会将子级置于row、stretched 的列中。然后，您也可以将孩子设为flex，并使用align-items: center 将其内容居中。根据每列内容中的实际内容，您可能希望将内容包装在像 div 这样的元素中，以便 div 居中并正常处理其中的内容。

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

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

<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>

【讨论】：