Flex混合命名须语义化，禁用flex-center等模糊名；推荐「方向+对齐+换行」三段式组合（如flex-row-space-between），并用带默认值的参数化混合（如.flex-align）提升复用性与可维护性。
Flex混合命名要带语义，别用 flex-center 这种模糊名
很多人一上来就写 .flex-center { display: flex; justify-content: center; align-items: center; }，看着省事，但实际项目里根本不敢复用——你永远不知道这个“center”是居中容器？居中子元素？还是既居中又换行？
真正可复用的混合必须绑定明确行为意图：flex-row（主轴水平）、flex-col-center（垂直布局+交叉轴居中）、flex-wrap（仅启用换行）等。
推荐按「方向 + 对齐 + 换行」三段式组合，比如：flex-row-space-between、flex-col-start-wrap。这样别人扫一眼就知道它干啥，也方便组合叠加。
用参数化混合替代硬编码值，避免重复定义
写死 justify-content: space-around 的混合，遇到 space-between 就得再写一个——这不叫复用，这叫复制粘贴。
Less 支持带默认值的参数混合，把可变部分抽成参数：
.flex-align(@justify: flex-start, @align: stretch, @direction: row, @wrap: nowrap) {
display: flex;
flex-direction: @direction;
flex-wrap: @wrap;
justify-content: @justify;
align-items: @align;
}
调用时灵活组合：.flex-align(space-between, center, row, wrap); 或只覆盖部分参数：.flex-align(~"space-around");（注意字符串参数需用波浪号避免转义）。
关键点：所有参数都设合理默认值，让最常用场景（如 flex-row）能零参数调用。
慎用 !important 和全局重置，Flex混合不该承担样式覆盖责任
有人为了让混合“生效”，在内部加 align-items: center !important，结果后续想单独改某个子元素对齐方式时被死死锁住。
Flex混合只负责声明基础布局能力，不干预具体业务样式。以下做法更安全：
- 所有属性不加
!important - 避免在混合里写
margin: 0; padding: 0;等重置类规则 - 如果需要强制对齐（比如弹窗内容必须居中），用独立类名封装，而不是塞进
flex-center混合里
否则混合越用越重，最后变成“用了就得删掉其他所有对齐样式”的绑架式工具。
配合 @media 写响应式 Flex 混合时，优先用嵌套而非重复定义
为移动端把 flex-row 切成 flex-col，别写两个独立混合然后靠 JS 切类名。Less 支持媒体查询嵌套：
.flex-responsive(@breakpoint: 768px) {
display: flex;
flex-direction: row;
@media (max-width: @breakpoint) {
flex-direction: column;
}
}
这样逻辑集中、维护成本低。但要注意：嵌套的 @media 会生成完整 CSS 规则块，如果混合本身被多次引用，可能造成冗余输出；高频复用场景建议把断点变量抽到全局配置，统一管理。
真正难的不是写出一个能用的 Flex 混合，而是让它在三个月后别人接手时，不查源码就能猜出 .flex-col-start-no-wrap 里哪部分控制换行、哪部分决定方向——名字、参数、职责边界，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
