.flex-row()比手写display: flex更可靠，因其在编译期固化合法组合、拼写错误直接报错，并将“横向布局+主轴左对齐+侧轴拉伸”封装为不可拆分单元。
为什么.flex-row()比手写display: flex更可靠
手写容易漏掉
或把
错打成
，而
这类Mixin在编译期就固化了合法组合，拼写错误直接报错。它不只省键盘，关键是把“横向布局+主轴左对齐+侧轴拉伸”这个意图打包成一个不可拆分的单元。
常见错误是把所有属性塞进一个
无参Mixin，结果遇到垂直布局还得覆盖
，反而增加维护成本。正确做法是按高频意图命名：
→
→
→ 只改
，其他继承父级或默认值
如何避免flex-wrap被意外覆盖
不是容器的默认行为，但90%的卡片列表需要它，导航栏却必须
。如果把
硬写死在
里，调用方就丧失控制权。
实操建议是拆出独立的
变体：
立即学习
“
前端免费学习笔记（深入）
”；
内部先调用
，再追加
项目级子项用
、
等独立Mixin控制，和容器解耦——改
不用动父容器声明
不要在Mixin里用
这种布尔参数，而是用显式命名：有
就带
，没写就不生效，语义更直白
响应式断点必须作为参数传入，不能硬编码媒体查询
典型翻车是这样写：
——PC和移动端逻辑割裂，后期改
得同步改两处。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
正确路径是把断点变成可选参数，并用变量统一管理：
定义变量：
Mixin签名：
内部实现：
（注意
前缀拼接）
调用时写
，既语义清晰，又支持全局调整
值
别在Mixin里直接写
，否则无法被外层媒体查询包裹（比如整个模块要统一禁用移动端堆叠）。
为什么不用CSS自定义属性替代这些Mixin
CSS变量适合控制颜色、间距这类标量，但
和
的合法值之间有强约束关系。例如
配
会导致子项高度塌缩，而
配
才合理。
Mixin能在编译期屏蔽非法组合：
用
守卫限制参数范围：
如果传入
，Less编译直接报错，而不是生成无效CSS
而CSS变量
会被浏览器静默忽略，问题拖到运行时才发现
真正难处理的是动态计算场景，比如根据子元素数量自动设
——这只能靠Less函数，CSS变量完全无能为力。
align-itemsjustify-content: centerjustfy-content.flex-row().flex()flex-direction.flex-row()display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch;.flex-col-center()flex-direction: column; justify-content: center; align-items: center;.flex-between()justify-content: space-betweenflex-wrap: wrapnowrapwrap.flex-row()wrap.flex-row-wrap().flex-row()flex-wrap: wrap;.flex-1().self-end()align-selfwhen (@wrap = true)wrapwrap@media (max-width: 768px) { .header { flex-direction: column; } }justify-content@bp-md: 768px;.flex-stack(@breakpoint: md)@media (max-width: @bp-@{breakpoint}) { .flex-col(); }@bp-.flex-stack(md)@bp-md@media (max-width: 768px)justify-contentalign-itemsspace-betweenstretchcenterflex-startwhen.flex-justify(@j) when (@j = flex-start), (@j = center), (@j = space-between).flex-justify(top)--justify: topflex-basis