如何让 Flexbox 子项占据父项的全部高度？

Flexbox 子元素占据父元素的全部高度

在 Flexbox 布局中，默认情况下，子元素不会填充其父元素的整个高度容器。当尝试创建一致的垂直排列时，这可能会出现问题。

问题：考虑以下示例，其中 .flex-2 中的 .flex-2-child 旨在填充 的高度它的父级：

.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;
}

但是，flex-2-child 并没有完全占据高度

解决方法 1：align-items:stretch:

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

此解决方案修改了 Flex 项目对齐方式，允许 flex-2-child 拉伸和填充可用高度。

解决方法 2： align-self:

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

此替代解决方案将对齐方式直接应用于子元素，确保其填充其父级 Flex 项目的高度。

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