align-items: stretch 是 flex 布局下实现等高列的默认行为，只要父容器设 display: flex 且未被子项 height/min-height、align-self 或脱离文档流等样式覆盖，子项即自动在交叉轴（row 时为垂直方向）拉伸等高。
align-items: stretch 是 Flex 布局下实现等高列的默认行为，只要没被显式覆盖或被子项自身样式压制，它就生效。SCSS 本身不提供新布局能力，但它能帮你更安全、更可维护地组织和封装这套逻辑。
为什么用 SCSS 封装等高列？
纯 CSS 写 display: flex + align-items: stretch 没问题，但真实项目里常遇到这些情况：min-height 冲突、height 覆盖、子项内 position: absolute 导致高度塌陷、多层嵌套后 align-items 被意外继承。SCSS 的变量、混合宏（@mixin）和嵌套能提前把“防踩坑”逻辑固化下来。
@mixin equal-height-column 怎么写才真正防坑？
这个 mixin 不只是加 display: flex，它要主动规避常见失效点：
- 强制设置
align-items: stretch（哪怕它是默认值，显式声明可防止父级或重置规则干扰） - 给子项统一加
min-height: 0—— 这是关键，尤其当子项含图片、iframe 或 flex 容器时，否则stretch可能失效 - 禁用子项的
height和max-height（用!important级别覆盖，避免业务层误设） - 支持传参控制列数、间隙（
$gap）、是否换行（$wrap）
示例：
@mixin equal-height-column($gap: 1rem, $wrap: false) {
display: flex;
align-items: stretch;
gap: $gap;
@if $wrap {
flex-wrap: wrap;
}
& > * {
min-height: 0;
height: auto !important;
max-height: none !important;
}
}
响应式场景下，flex-direction 切换会破坏等高吗？
会，而且很隐蔽。比如移动端改成 flex-direction: column 后，align-items: stretch 控制的是“水平方向拉伸”，不再影响高度。此时等高失效，各列恢复内容高度。
- 解决方案不是硬扛，而是分场景定义 mixin：一个叫
equal-height-row（默认横向），一个叫equal-height-col（纵向时改用justify-content: stretch+ 子项width: 100%） - 更稳妥的做法是：只在需要等高的断点（如桌面端三栏）启用该 mixin，移动端直接取消
display: flex或改用grid - 别依赖媒体查询里动态改
flex-direction来“复用”同一套等高逻辑 —— 方向一变，交叉轴就变了，stretch失效是设计使然，不是 bug
Grid 替代方案在 SCSS 里怎么封装更合理？
Grid 天然等高，但它的“行高由最高项决定”特性在某些场景反而不如 Flex 稳定（比如内容异步加载时，Grid 行高会重排，可能引发跳动）。SCSS 封装时建议：
- 用
@mixin equal-height-grid($columns: 3)，内部用grid-template-columns: repeat($columns, 1fr) - 明确要求调用方保证容器有明确高度（或用
minmax()控制最小行高），否则空内容列可能塌缩 - 避免在同一个组件里同时混用 Flex 和 Grid 的等高 mixin —— 调试时你会分不清是哪层在拉伸
- 如果项目需兼容 IE11，
grid必须降级为display: table-cell，这时 SCSS 的@supports检测比 JS 判断更轻量
真正容易被忽略的点是：等高不是目的，视觉一致性才是。有时强行等高会让短内容列底部留白难看，这时候该加 margin-top: auto 对齐按钮，而不是死守“必须等高”。SCSS 能帮你把这类 UI 策略也参数化，比如 $align-bottom: true。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
