Flex布局中左右两栏等高需确保父容器设display: flex，子项未设置height/align-self等覆盖属性；align-items: stretch为默认值，无需显式声明；内容少时可用padding或::after伪元素辅助撑开。
左右两栏高度不一致，本质是父容器没有强制子元素拉伸对齐。Flex布局中 align-items: stretch（默认值）就能让子项自动等高，前提是父容器设为 display: flex，且子项没设置固定高度或 align-self: flex-start 这类覆盖行为。
确认父容器是 flex 布局
这是前提。如果只是给子元素加了 flex 相关属性，但父容器仍是 block，那 align-stretch 不生效。
- 给左右两栏的直接父容器加上 display: flex
- 不需要额外写 align-items: stretch —— 它是 flex 默认值
- 避免父容器同时设了 flex-direction: column（这会让主轴垂直，影响左右排列）
检查子项是否主动“放弃”拉伸
即使父容器是 flex，个别子项也可能因自身样式拒绝等高。
- 移除子项上的 height、max-height 或 min-height（除非你明确需要限制）
- 检查有没有 align-self: flex-start、align-self: center 等声明，它们会覆盖父容器的 stretch 行为
- 图片、iframe 等替换元素有时自带 baseline 对齐，可加 align-self: stretch 强制拉伸
内容少的栏目也要撑开？试试 padding 或伪元素
如果某栏内容极短（比如只有标题），视觉上仍显“塌陷”，单纯 stretch 可能不够明显。这时可辅助增强：
- 给该栏加 padding-bottom: 1rem，让底边有呼吸感
- 用 ::after 伪元素 + flex: 1 占满剩余空间（适合需底部对齐场景）
- 避免用 height: 100% —— 在 flex 中它不一定等于容器高度，容易失效
基本上就这些。align-stretch 本身不复杂，但容易被隐藏样式干扰。先看父容器 display，再扫一遍子项的 align-self 和 height 类型，90% 的等高问题就解决了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
