less本身不提供多列等高能力，真正实现靠编译后的css；flexbox（display: flex+align-items: stretch）和grid（grid-auto-rows: 1fr）是唯一可靠、语义清晰的方案。
Less 本身不提供多列等高布局能力，它只是 CSS 预处理器；真正实现等高靠的是编译后的 CSS —— Flexbox 或 Grid 是目前唯一可靠、语义清晰的方案。
为什么不能用 height: 100% 或 display: table-cell？
这些老办法在 Less 里写起来很“顺”，但实际运行时问题一堆：
-
height: 100%要求父容器有明确高度，嵌套深了极易失效，且响应式下完全不可控 -
display: table-cell会破坏语义结构，vertical-align行为难预测，Flex/Grid 出来后已不推荐 - Less 编译不出新布局逻辑，它只做变量替换、嵌套和混合，别指望它“自动拉齐高度”
用 Less 封装 Flexbox 等高布局的正确姿势
把 Flexbox 的核心声明抽成可复用的 mixin，而不是硬写死样式。重点是控制 align-items 和子项的 flex 行为：
.flex-col-equal-height() {
display: flex;
align-items: stretch; // 关键：让子项默认撑满交叉轴（即等高）
}
.flex-row-equal-height() {
display: flex;
flex-direction: row;
align-items: stretch;
}
// 子项通用等高基础（避免被 margin/padding 拉偏）
.flex-item-stretch() {
align-self: stretch;
margin: 0;
}
使用时直接调用：
.card-group {
.flex-row-equal-height();
> .card {
.flex-item-stretch();
flex: 1; // 均分剩余空间，也可用 flex: 0 0 auto 配合 width 控制
}
}
注意：align-items: stretch 在 Flex 容器中默认生效，但显式写出更稳妥，尤其当父级有其他样式干扰时。
Grid 方案更适合复杂二维布局，Less 里怎么安全封装？
Grid 的 grid-template-rows: 1fr 是等高的本质，但必须配合 grid-auto-rows 或显式轨道定义。Less 封装时要避开动态行数陷阱：
- 固定列数 + 等高：用
grid-template-rows: 1fr+grid-auto-flow: column - 响应式列数变化：优先用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，但等高需额外加grid-auto-rows: 1fr - 千万别在 Less 里用
@for循环生成grid-row—— Grid 行高由内容驱动，不是靠循环控制的
一个安全的 Grid 等高 mixin 示例：
.grid-equal-rows(@rows: 1fr) {
display: grid;
grid-auto-rows: @rows;
grid-auto-flow: row;
}
// 使用
.feature-grid {
.grid-equal-rows(1fr);
grid-template-columns: repeat(3, 1fr);
}
容易被忽略的兼容性与调试点
Flexbox 和 Grid 在现代浏览器中没问题，但真正在意兼容性时得小心：
- IE11 支持 Flexbox 但有大量 bug（比如
align-items: stretch对min-height失效），别信“加前缀就 OK” - Grid 在 IE 中基本不可用，
@supports (display: grid)必须配真实降级方案，不能只靠 Less 变量开关 - Less 编译后 CSS 里若出现
flex: 1 1 auto，检查是否被压缩工具误删空格 —— 某些旧版 cssnano 会干这事，导致等高失效 - 调试时直接看浏览器 DevTools 里的 computed 样式，确认
align-items或grid-auto-rows是否生效，而不是只盯 Less 源码
等高不是靠某个神奇的 Less 函数，而是靠你选对了底层 CSS 机制，并用 Less 让它更易维护 —— 混淆这两层，迟早掉坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
