如何使 Flexbox 子容器占据其父容器的整个高度？

如何使 Flexbox 子元素与其父元素高度相同

使用 Flexbox 时，您可能会遇到让子元素填充其父容器的整个垂直空间的挑战。如果您希望子元素的高度为父元素的 100%，这可能会特别令人沮丧。

Flexbox 父容器设置

这是您的简化版本HTML 和 CSS代码：

HTML：

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

CSS：

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

解决方案：align-items：stretch

要解决此问题，无需诉诸绝对定位或将 flex-2 元素的高度设置为100%，可以在父容器flex-2上使用align-items:stretch属性。

.flex-2 {
  display: flex;
  align-items: stretch;
}

高度属性注意事项

很关键从 flex-2-child 元素中删除 height: 100% 属性。这将确保子元素在父容器内垂直拉伸。

替代：align-self

另一个选项是使用align-self:stretch on您想要填充高度的特定子元素。

.flex-2-child {
  align-self: stretch;
}

此方法使您可以更好地控制单个子元素元素。

以上是如何使 Flexbox 子容器占据其父容器的整个高度？的详细内容。更多信息请关注PHP中文网其他相关文章！