less中calc()须写在属性值内并用~""拼接，不可直接赋值变量；align-content需容器有明确交叉轴尺寸才生效；flex无原生gap，可用grid替代或伪元素模拟（需设flex: 0 0 0）。
Less中用calc()动态算margin，但别直接写在变量里
Less变量不支持运行时calc()计算，写@gap: calc(100% / 3 - 20px)会原样输出，浏览器解析时报错。真正能用的，是把calc()放在属性值里，配合Less变量做参数拼接。
常见错误现象：编译后CSS里出现margin-left: calc(100% / 3 - 20px)，但实际渲染时子项宽度没对齐，因为calc()被当作文本传进去了——其实是Less没展开变量导致的。
- 正确写法：
.item { margin-right: ~"calc((100% - @{gutter} * 2) / 3)"; }，其中@gutter是已定义的数值变量（如@gutter: 12px） - 如果要适配不同列数，用
.make-gap(@cols, @gutter)函数封装，内部用~"calc(...)”拼字符串 - 注意
~""是Less的“不转义字符串”，少了它，/会被当成除法运算符提前计算
Flex换行后行间距过大？align-content不是万能解药
align-content只在flex-wrap: wrap且容器有**明确交叉轴尺寸**（比如设了height或max-height）时才生效。如果父容器高度由内容撑开，align-content: flex-start看起来像没起作用——其实它起了，只是没空间可“分配”。
使用场景：导航栏多行、卡片网格、响应式标签云。一旦加了固定高度，align-content: stretch（默认）会让每行强行拉满，产生巨大空白；而flex-start只是把所有行堆在顶部，中间空着。
- 先确认父容器是否设置了
height、max-height或min-height - 若需控制行间距，改用
row-gap（需display: grid）或给子项加margin-bottom（注意最后一行多余间隙） - Less里可封装
.flex-wrap-gap(@gap)，生成.item { margin-bottom: @gap; } .item:nth-last-child(-n+@cols) { margin-bottom: 0; }，但需知道每行数量
用Less生成nth-child选择器模拟gap，但列数必须固定
Flex本身没有gap的跨浏览器方案，所以有人用:nth-child清除每行末项的margin。这要求每行显示数量确定，否则:nth-child(3n)在小屏变两列时就失效了。
性能影响不大，但维护成本高：屏幕断点一变，Less里就得同步改多个@cols变量和对应选择器。更麻烦的是，如果子项DOM顺序不规则（比如服务端渲染打乱），nth-child完全不可靠。
- Less中定义
@cols: 3;后，用.item { margin-right: @gutter; } .item:nth-child(@cols)n { margin-right: 0; } - 响应式场景下，得为每个断点写一套
@media+ 新@cols+ 新选择器，代码量翻倍 - 替代思路：用
gap并加-webkit-gap前缀，Safari 10.1+已支持；IE11用户极少，真要兼容再fallback到伪元素方案
Less里用伪元素占位实现space-evenly效果，但别漏flex: 0 0 0
想让Flex容器两端和中间空白完全相等，justify-content: space-evenly最省事，但它在旧版Safari和Android WebView里不生效。用伪元素模拟时，关键在flex: 0 0 0——不是width: 0，也不是visibility: hidden，否则Flex引擎可能跳过它，导致空白份数不对。
容易踩的坑：伪元素默认是display: inline，在Flex容器里会被当成文字节点处理，有时高度不为零，造成额外基线偏移。
- 正确写法：
&::before, &::after { content: ""; flex: 0 0 0; } - 务必加
flex: 0 0 0，它等价于flex-grow: 0; flex-shrink: 0; flex-basis: 0，确保不占空间也不参与计算 - 如果子项含图片或字体加载未完成，伪元素位置可能抖动，建议同时加
font-size: 0和line-height: 0防基线干扰
实际项目里，最省心的是直接用gap + grid替换Flex，尤其当列数不固定时。Less能帮你把重复逻辑抽成函数，但解决不了Flex底层设计限制——比如跨行重分配空白、伪元素在流式内容里的稳定性，这些得靠架构层判断，不是预处理器能兜住的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
