核心是用 display: flex + flex-wrap: wrap 实现宽屏横排、窄屏单列；需配合 max-width 媒体查询移动优先，子项用弹性宽度而非固定高，避免 white-space: nowrap 等导致不换行。
用 display: flex + flex-wrap 控制排列方向
核心是让容器在宽屏下横向排列子项，窄屏下自动换行成单列。不能只靠 flex-direction: row，得配合断点和换行逻辑。
常见错误是只设 flex-direction: column 响应式切换，结果小屏内容被强行压扁、溢出或高度失控。
- 默认设
display: flex和flex-wrap: wrap，让子项自然流式排列 - 大屏下用
flex-direction: row（默认值，可不写），并给子项设固定或弹性宽度（如flex: 1 1 300px） - 小屏用媒体查询改
flex-direction: column，同时重置子项宽度为flex: 1 1 auto或width: 100% - 避免对子项硬写
height，否则小屏下容易撑不开或截断
媒体查询的断点选 max-width 还是 min-width？
推荐用 max-width，从移动优先出发——先写小屏样式，再用 @media (max-width: 768px) 覆盖小屏规则，其余默认走大屏布局。这样更符合渐进增强逻辑，也减少遗漏。
如果反过来用 min-width 写大屏，小屏样式没包在查询里，一旦漏写，页面在手机上直接崩。
立即学习“前端免费学习笔记（深入）”；
-
@media (max-width: 768px)是主流断点，覆盖大部分平板竖屏和所有手机 - 别用设备像素比或
device-width，那些不可靠，且现代响应式依赖视口宽度而非设备类型 - 断点数值不是魔法数字：768px 是常见临界值，但实际应以内容撑满为准，可临时加
outline: 1px solid red辅助观察
grid 能不能替代 flex 实现同样效果？
能，但要小心模板定义和隐式轨道。Grid 更适合已知列数或需要二维对齐的场景；Flex 更适合一维流式内容（比如卡片列表、表单字段）。
常见错误是直接套用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 却忘了小屏下没重置，导致卡片挤成一行超宽滚动。
- 大屏用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))实现等宽自适应 - 小屏必须显式覆盖：在
@media (max-width: 768px)里设grid-template-columns: 1fr - Grid 的
gap在小屏下可能显得过大，建议用rem或clamp()控制，比如gap: clamp(0.5rem, 2vw, 1rem)
为什么加了 flex 还是不换行？
大概率是子项没设宽度约束，或者父容器没设 flex-wrap: wrap。Flex 默认不换行（flex-wrap: nowrap），即使空间不够也会强行横向压缩。
另一个隐蔽坑是子项用了 white-space: nowrap 或含长单词/URL，导致无法折行，进而撑开整行。
- 检查父容器是否写了
flex-wrap: wrap（Flex 默认值是nowrap） - 子项避免写死
width: 100%或min-width过大，优先用flex: 1 1 280px这类弹性声明 - 文本内容加
word-break: break-word或overflow-wrap: break-word防止溢出 - 用浏览器开发者工具的“Layout”面板看 computed
flex-basis和flex-shrink，确认是否被意外锁定
margin 和 padding 在不同断点下的叠加效应——大屏看着刚好，小屏时多个内边距一叠加，内容就被顶出视口，还找不到原因。调的时候别光盯布局属性，顺手把盒模型也 hover 一遍。 
