流式布局是用相对单位替代固定像素并配合约束机制实现弹性伸缩，核心是%+min/max-width、flex或grid结合媒体查询，在保持结构稳定前提下适配多端。
流式布局不是“让页面看起来能缩放”，而是让关键容器的宽度随视口变化而弹性伸缩，同时保持结构稳定。核心就一条：用相对单位替代固定像素，但必须配合约束机制，否则在极小或极大屏幕上会崩。
用 % 设置宽度 + min-width/max-width 保底线
纯百分比容易在手机上挤成一条线，或在 4K 屏上撑得过大。必须加限制：
-
width: 80%是起点，但要立刻跟上min-width: 320px和max-width: 1200px - 父容器也得设
width: 100%或明确尺寸，否则子元素的%无从参照 - 避免对
html或body直接设width: 100%，它们默认已填满视口；设了反而可能触发怪异滚动条
用 flex 实现左右定宽 + 中间自适应
这是最干净、最现代的流式主结构方案，不需要浮动、不依赖 overflow: hidden 清浮动：
- 父容器加
display: flex，左侧元素设flex: 0 0 240px（不伸缩、不压缩、固定宽） - 中间内容区域设
flex: 1，它会自动吃掉剩余所有空间 - 右侧同理用
flex: 0 0 200px；若右侧也要自适应，改用flex: 0 1 200px（允许压缩） - 注意：IE10–11 对
flex的flex-basis解析有差异，flex: 0 0 240px比flex: 0 0 auto; width: 240px更稳
用 grid 做响应式三栏，列宽用 fr 或 minmax()
当结构明确为多列且需强控制时，grid 比 flex 更直接：
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: 240px 1fr 200px—— 左右定宽，中间占剩余全部 -
grid-template-columns: minmax(240px, 30%) 1fr minmax(200px, 25%)—— 左右最小/最大比例双控，中间仍弹性 - 别忘了加
grid-gap（或gap），它不会影响列计算逻辑，但能避免手写margin引发的盒模型错位 - 移动端可直接用媒体查询覆盖整行：
@media (max-width: 768px) { grid-template-columns: 1fr; }
慎用 column-count / column-width 做“伪流式”
这两个属性只适用于纯文本流分栏，不是通用布局工具：
-
column-width: 16rem是推荐写法，浏览器按最小列宽动态算列数；column-count: 3强制列数，内容少时留大片空白 - 必须加
break-inside: avoid到子块级元素（如p、section），否则段落被硬切开 - 移动端几乎必然要重置为单列：
@media (max-width: 480px) { column-count: 1; }，否则文字过窄难读 - 卡片、按钮、表单控件一律不能塞进
columns里——它们会错位、截断、失去交互焦点
真正难的不是选哪种方法，而是判断哪些区域该“流”，哪些该“锁”。比如导航栏高度常需固定，但内部菜单项宽度可以流；表单标签用 em，输入框用 %，提交按钮用 rem——混合单位才是日常。别追求“一套代码打天下”，流式是约束下的弹性，不是无条件拉伸。
