盒模型是flex和grid的底层基础，但不直接实现自适应布局；真正驱动自适应的是display: flex和display: grid，它们在盒模型之上构建新布局上下文。
盒模型本身不直接实现自适应布局，但它是 flex 和 grid 的底层基础
很多人误以为调整 box-sizing 或 margin 就能“用盒模型做响应式”，其实盒模型只是定义元素宽高如何计算（比如是否包含 padding 和 border），它不提供排列、伸缩、重排能力。真正驱动自适应的是 display: flex 和 display: grid——它们在盒模型之上构建了新的布局上下文。
务必先设好基础盒模型行为：
-
box-sizing: border-box是必须的，否则width: 100%+padding会撑破容器 - 避免在 flex/grid 容器上设
padding后又用子元素margin对齐，容易引发双倍间隙或截断 - 不要给 flex item 或 grid item 设
float或position: absolute，会退出布局流，破坏自适应逻辑
flex 布局中哪些属性决定响应行为
flex 的响应能力来自其主轴/交叉轴的弹性控制，而非媒体查询本身。媒体查询只是“开关”，真正让元素随屏幕变化的是以下组合：
-
flex-wrap: wrap：允许子项换行，是移动端多列转单列的关键；不加它，flex默认强行挤在一行，可能溢出 -
flex-basis配合min-width：比如flex: 0 1 calc(33.333% - 1rem)+min-width: 280px，可让卡片在小屏下自动退为单列 -
align-items和justify-content控制对齐，但注意：在窄屏下若内容过长，justify-content: center可能导致文字被截断，此时应改用text-align: center配合flex-direction: column
常见错误：flex: 1 用在有固定宽高的卡片上，结果卡片被拉伸变形——应改用 flex: 0 1 auto 保原始尺寸。
立即学习“前端免费学习笔记（深入）”；
grid 布局里 fr 单位和 minmax() 怎么配合断点
fr 是弹性单位，但单独用 grid-template-columns: 1fr 1fr 1fr 并不能响应；必须配合 repeat() 和函数式轨道定义：
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))))是最常用模式：最小 280px，最大填满可用空间，浏览器自动算列数 - 避免写死
repeat(3, 1fr)—— 这在手机上会强制三列，内容被严重压缩 -
grid-auto-rows: minmax(100px, auto)控制行高弹性，防止图片或标题高度突变时撑乱整体节奏 - 媒体查询中优先改
grid-template-areas而非重复定义整个grid-template-columns，语义更清晰，例如从"header header" "main aside"切到"header" "main" "aside"
flex 与 grid 混用时最容易忽略的嵌套陷阱
常见做法是外层 grid 划分大区域（header/main/aside），内部用 flex 排按钮或卡片列表——这没问题，但要注意：
- grid 容器内的 flex 子项，其
width计算仍基于父 grid track 的尺寸，不是视口；若 track 本身没设minmax，flex 无法突破该限制 - 不要在 grid item 里再设
display: grid且未约束列数，尤其当该 item 宽度由fit-content决定时，内层 grid 可能无限收缩导致内容重叠 - flex 容器设了
flex-direction: column后，align-items: stretch默认拉宽子项，若子项是input或button，可能意外撑满整列——加align-items: flex-start更可控
最隐蔽的问题：某些 CSS 重置库（如 modern-normalize）会把 form 元素设为 display: block，若你把它放进 flex 容器却没显式设 display: contents 或包裹一层 div，表单控件可能脱离 flex 流。动手前先用浏览器 devtools 检查 computed display 值。
