Flex-wrap: wrap 在小屏幕不生效，主因是父容器存在 min-width 等隐式约束；应改用 flex-basis 替代固定 width，并优先根据需求选择 Flex（一维流式）或 Grid（二维结构化）布局。
flex-wrap: wrap 在小屏幕下不生效？检查父容器最小宽度
Flex 项目在窗口缩小时挤成一列却无法换行，通常不是 flex-wrap 没设，而是父容器（如 <div class="container">）被设置了 min-width 或隐式约束（比如 width: 100% 配合子项固定宽度）。Flex 容器默认不会主动收缩子项来触发换行，它优先保持子项原始尺寸。
- 确保父容器没有
min-width、white-space: nowrap或overflow: hidden干扰布局流 - 给子项设置
flex-basis而非固定width，例如用flex: 1 1 250px表示“理想宽度 250px，可伸缩，可收缩” - 若需严格按列数响应，
flex不如grid精确；但若只需“尽可能多排、不够就折”，flex-wrap+flex-basis是轻量解法
用 @media + flex-direction 切换单列/多列，但要注意 DOM 顺序依赖
通过媒体查询切换 flex-direction: column 和 row 实现响应式，看似简单，实际会改变视觉顺序与阅读流。屏幕阅读器和键盘 Tab 顺序仍按 HTML 源码顺序，而 flex-direction: column 只是视觉重排，不改变 DOM 结构。
- 移动端优先：HTML 中按逻辑顺序写内容（如标题 → 图片 → 文案），再用
order微调视觉位置，避免依赖flex-direction大幅翻转 - 不要对同一组项目既用
flex-direction: column又用flex-direction: row-reverse，容易丢失可访问性 - 替代方案：用
display: grid配合grid-template-areas，语义更清晰，且@media内可完全重定义区域布局
grid-template-columns: repeat(auto-fit, minmax(...))) 为什么有时只显示一列？
auto-fit 和 auto-fill 行为差异常被忽略：当剩余空间不足以容纳一个 minmax() 单元时，auto-fit 会**收缩已生成的轨道并拉伸填满容器**，而 auto-fill 会**保留空轨道**。所以如果看到只有一列，很可能是容器太窄，或 minmax() 下限设得过高。
/* 错误：下限 300px，但容器宽仅 280px → 无轨道生成 → 显示为空 */
.grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))); }
<p>/<em> 正确：下限设为合理值，如 240px，并配合 gap 防止过密 </em>/
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)));
gap: 1rem;
}- 测试时用浏览器开发者工具拖动窗口边缘，观察
grid-template-columns计算值是否变为none或单个1fr - 加
justify-content: center可避免最后一行项目左对齐留白 - 若需兼容 IE11，
auto-fit不支持，必须用 JS 动态计算列数或降级为 Flex
Flex 与 Grid 响应式选型：别为了“自动”牺牲控制力
Flexbox 擅长一维流式排列（主轴方向），适合导航栏、卡片列表等“尽量排、排不下就折”的场景；Grid 擅长二维定位（行列同时可控），适合仪表盘、图文混排等需要明确区域关系的布局。强行用 Flex 模拟 Grid 的行列对齐，最终往往要靠 margin、calc() 或 JS 补救。
立即学习“前端免费学习笔记（深入）”；
- 纯卡片网格：优先用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，简洁可靠 - 带固定侧边栏+主内容区：用
grid-template-areas+@media重定义区域，比 Flex 的order更易维护 - Flex 仍有不可替代场景：如表单控件对齐（
align-items: center）、按钮组内图标文字垂直居中、文本行末尾自动右对齐操作按钮
真正难的不是写对某条声明，而是判断当前需求属于“流式适应”还是“结构化分区”——选错模型，后面所有 media query 和 hack 都是徒劳。
