flex-wrap不生效主因是父容器缺宽度约束；grid中fr与minmax混用致列宽异常；媒体查询断点失效多因缺失viewport元标签；calc()单位混用或空格错误会解析失败。
flex布局里flex-wrap不生效？检查父容器是否设了width
很多同学写完display: flex加flex-wrap: wrap，子项就是不换行——八成是父容器没给明确宽度，或者被内容撑开导致“看起来没换行”。flex-wrap只在容器空间不足时触发，如果父容器本身无限宽（比如width: auto且无约束），浏览器根本不会认为需要换行。
- 给父容器加
width、max-width或flex-basis等尺寸约束 - 避免父容器外层用
white-space: nowrap或display: inline-flex却不设宽 - 用
devtools检查计算后的width值，别只看CSS声明
grid中minmax()和fr混用时，列宽忽大忽小？优先级和基数要对齐
minmax(200px, 1fr)看着合理，但实际可能被grid-template-columns: 1fr 2fr minmax(200px, 1fr)带偏：最后一列的1fr会跟前两列的1fr和2fr一起参与总份数分配，导致它比预期窄。本质是fr单位按比例分剩余空间，而minmax()里的1fr只是“上限参考”，不参与全局份数计算。
- 统一用
minmax()表达所有列，比如minmax(200px, 1fr) minmax(200px, 2fr) minmax(200px, 1fr) - 若需固定比例，改用
repeat()配合minmax()，如repeat(3, minmax(200px, 1fr)) - 注意
gap会从总可用空间中扣除，影响fr计算结果
媒体查询里max-width断点失效？别忽略视口元标签和设备像素比
写好@media (max-width: 768px) { ... }，但在手机上死活不触发——大概率是页面漏了<meta name="viewport" content="width=device-width, initial-scale=1">。没有这个，移动端浏览器会以桌面视口（通常980px左右）渲染，768px永远达不到。
- 检查
head里是否有该meta标签，且content没拼错 -
max-width匹配的是CSS像素，不是物理像素；高DPR设备（如iPhone）下，window.innerWidth返回的是CSS像素，但device-width在meta中对应的是设备独立像素，两者要对齐 - 调试时用
console.log(window.innerWidth)确认当前视口宽度，比猜更准
用calc()做动态间距时，单位混用报错？空格和括号必须严格
margin-left: calc(50% - 20px);能跑，但margin-left: calc(50%-20px);（少空格）或margin-left: calc(50% -20px);（减号后紧贴数字）会直接失效，浏览器解析失败后回退到初始值。
-
+、-两侧必须有空格，*、/两侧可无空格但建议统一加空格提升可读性 - 嵌套
calc()合法，但calc(calc(100% / 3) - 10px)这种写法在旧版Safari里支持差，尽量扁平化 - 不要在
calc()里用em或rem混算px，字体大小变化时行为难预测
事情说清了就结束。动态布局最麻烦的从来不是语法，而是不同约束条件之间的隐式冲突——比如flex的主轴尺寸、grid的轨道分配、视口的实际像素值，三者稍有错位，表现就完全走样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
