在 Flexbox 布局中，当一个子元素具有固定高度时，可通过设置父容器 align-items: stretch 让其他子元素自动拉伸填充可用垂直空间，再结合子项自身的 align-items: center 实现内容居中对齐。
在 flexbox 布局中，当一个子元素具有固定高度时，可通过设置父容器 `align-items: stretch` 让其他子元素自动拉伸填充可用垂直空间，再结合子项自身的 `align-items: center` 实现内容居中对齐。
默认情况下，Flex 容器的 align-items 值为 stretch，但若父元素显式设置了 height: fit-content 或存在其他约束（如未定义明确高度上下文），该行为可能被抑制。本例中，.parent 的 height: fit-content 会限制其内在高度计算逻辑，导致 .child-flex 无法自然拉伸——关键在于确保父容器启用默认的拉伸行为，并移除干扰高度计算的声明。
正确做法是：
✅ 将 .parent 的 align-items 显式设为 stretch（虽为默认值，但显式声明可增强可读性与兼容性）；
✅ 移除 height: fit-content，改由子项（如 .large-child）的高度决定容器高度；
✅ 在 .child-flex 上设置 align-items: center，使其内部 flex 项目垂直居中，同时自身高度由父容器拉伸撑开。
以下是完整可运行代码：
.parent {
display: flex;
width: 100%;
background-color: gray;
align-items: stretch; /* 关键：启用子项垂直拉伸 */
/* 移除 height: fit-content —— 依赖子项自然撑高 */
}
.child-flex {
display: flex;
background-color: blue;
align-items: center; /* 关键：内部子项垂直居中 */
justify-content: flex-start;
}
.large-child {
background-color: red;
width: 50px;
height: 50px; /* 固定高度，作为高度基准 */
}
<div class="parent">
<div class="large-child"></div>
<div class="child-flex">
<a>Item 1</a>
<a>Item 2</a>
<a>Item 3</a>
</div>
</div>
⚠️ 注意事项：
- align-items: stretch 仅对非绝对定位、无固有高度（如 height/min-height 显式设置）且未设置 flex-shrink: 0 干扰拉伸的 flex 项目生效；
- 若 .child-flex 设置了 height: 100%，反而会因父容器无明确高度而失效——Flex 拉伸不依赖百分比高度，而是由 align-items 控制；
- 如需响应式或动态高度场景，可配合 min-height 或 flex: 1 进一步增强鲁棒性，但本例中纯 stretch 已足够。
总结：Flexbox 的垂直等高并非靠“继承”或“百分比”，而是通过 align-items: stretch 触发的默认拉伸机制实现。理解这一核心行为，即可优雅解决多列等高、侧边栏对齐等常见布局问题。
