流式布局需配合viewport设置、box-sizing控制和断点干预，否则易出现横向滚动条或文字拥挤；viewport标签缺失或错误是失效主因，必须设width=device-width和initial-scale=1，且所有元素应统一box-sizing:border-box。
流式布局不是“加个百分比就完事”，它必须配合 viewport 设置、盒模型控制和断点干预，否则在 iOS Safari 或 Android Chrome 上大概率出现横向滚动条或文字挤成一团。
viewport meta 标签漏写或参数错误
移动端流式布局失效的头号原因就是 viewport 没配对。没它，浏览器会以桌面视口（通常 980px）渲染页面，再缩放显示——导致字体小、点击区域错位、width: 100% 失效。
-
content="width=device-width, initial-scale=1"是底线，缺一不可 - 加
maximum-scale=1, user-scalable=no会禁用双指缩放，影响可访问性，除非产品明确要求（如 kiosk 设备） - 不要写
width=375这类固定值，它只对某款 iPhone 有效，其他设备全乱 - 部分老安卓 WebView 对
initial-scale=1.0解析不稳定，建议写成initial-scale=1（不带 .0）
flex: 1 在多层嵌套中突然失效
当你写 flex: 1 发现子元素没撑满父容器，大概率是中间某层没设 height 或 min-height。Flex 布局的“高度传递”不是自动的，尤其在 body > main > section > div 这类结构里。
- 父容器必须有明确高度来源：要么是
height: 100vh，要么是上级设了height并向下inherit -
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，但若flex-basis被其他样式覆盖（比如写了width: 200px），就会失灵 - 避免在 flex 容器上同时用
float或position: absolute，它们会让元素脱离 flex 流
column-width 分栏在手机上字太窄
column-width 本意是让内容“按需分栏”，但直接用在未加断点的全局样式里，手机端会硬生生切成三四列，每列宽度不足 80px，中文阅读极其吃力。
- 必须搭配媒体查询重置：
@media (max-width: 768px) { .article { column-count: 1; } } -
column-gap默认是 1em，在小屏下显得空洞，建议同步设为column-gap: 0.5rem -
break-inside: avoid要加在具体语义元素上（如h2、p），不能只写在容器上 - Safari 14 以下需补
-webkit-column-break-inside: avoid
百分比宽度 + padding 导致溢出
width: 50% 的两个盒子并排，看起来应该刚好占满，但如果父容器有 padding，而子元素又没设 box-sizing: border-box，那实际宽度 = 50% + padding，必然溢出产生横向滚动条。
- 所有参与流式计算的元素，务必统一设
*, *::before, *::after { box-sizing: border-box; } - 避免在百分比元素上直接写
padding-left: 20px，改用padding-inline-start: 1rem或相对单位（%、rem） - 浮动布局（
float: left）已淘汰，但若遗留代码中用了，记得清浮动：container::after { content: ""; display: table; clear: both; }
真正卡住人的从来不是语法，而是“为什么这个 100% 不占满”“为什么 flex 布局在真机上塌陷”——问题往往藏在 viewport、box-sizing、高度继承这三处，而不是你写的那行 display: flex。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
