Flexbox 本身不是响应式方案，但它是构建响应式布局最可靠的一维基础；真正起响应作用的是 flex-wrap、flex 缩写行为、媒体查询配合，以及对主轴/交叉轴方向的动态切换。
Flexbox 本身不是响应式方案，但它是构建响应式布局最可靠的一维基础；真正起响应作用的是 flex-wrap、flex 缩写行为、媒体查询配合，以及对主轴/交叉轴方向的动态切换。
flex-direction 切换主轴时，justify-content 和 align-items 的作用方向会翻转
很多人以为 justify-content: center 总是“居中”，其实它只在主轴上生效。当容器设为 flex-direction: column，主轴变成垂直方向，justify-content 就控制上下对齐，align-items 才管左右。
- 错误写法：
flex-direction: column; justify-content: center;→ 所有子项在顶部垂直居中堆叠（不是水平居中） - 正确写法：想让垂直排列的项目“水平居中”，必须加
align-items: center; - 移动端常用组合：
display: flex; flex-direction: column; align-items: center;实现单列内容整体居中 - 注意：旧版 Safari（iOS 9–10）对
flex-direction: column下的align-items: stretch渲染异常，建议显式设align-items: flex-start避免意外拉伸
flex-wrap: wrap 是多行响应式布局的前提，nowrap 是默认值
卡片列表、功能模块格子在小屏上挤成一条或直接溢出？大概率是忘了设 flex-wrap: wrap。它默认就是 nowrap，死扛一行到底，不管容器多窄。
-
flex-wrap: nowrap（默认）：所有子项强制单行，超宽则溢出或缩小（取决于flex-shrink） -
flex-wrap: wrap：子项自动换行，此时align-content才生效（控制行与行之间的对齐） - 移动端两列卡片安全写法：
display: flex; flex-wrap: wrap;+ 每个子项flex: 0 0 50%（注意不是width: 50%，后者在某些 Android WebView 中失效） - 避免用
width: 33.333%做三列——小数精度和 margin 叠加易导致最后一项掉行，改用flex: 0 0 calc(33.333% - 8px)或gap更稳
flex 缩写省略时的默认值容易误判，尤其影响响应行为
flex 是 flex-grow、flex-shrink、flex-basis 的简写，顺序固定，省略部分按规则补默认值——而这些默认值常和直觉相反。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1→ 解析为flex: 1 1 0：从 0 开始均分空间，忽略内容宽度，文字多的项反而被压窄 -
flex: auto→flex: 1 1 auto：先按内容占位，再分剩余空间，适合文字长度差异大的场景（如导航菜单） -
flex: 0 0 auto：不放大、不缩小、按内容原始尺寸渲染——这是“保持原始宽度”的安全起点 - 等宽卡片必须统一
flex-basis：比如三列，子项都设flex: 0 0 calc(100% / 3)，并确保父容器无 padding 干扰计算
align-items 不能单独控制某个子项，要用 align-self
align-items 是容器级属性，作用于所有子项。想让第 3 个卡片顶对齐、其余居中？必须在那个子项上单独加 align-self: flex-start。
-
align-self可取值与align-items相同：flex-start、center、flex-end、stretch等 - 注意：如果子项设置了
align-self，它会覆盖容器的align-items设置，但仅限该子项 - 常见误用：
align-items: center后又给某个子项设margin-top: auto—— 在 Flex 容器里，margin: auto在交叉轴方向也有效，但优先级低于align-self，行为不稳定，建议统一用align-self - 兼容性提醒：IE10–11 对
align-self支持不全，需加-ms-flex-item-align前缀
真正难的不是写对某一行 CSS，而是理解 flex-direction 一变，整个对齐逻辑就翻转；flex-wrap 不显式声明，换行根本不会发生；flex 缩写里藏着三个参数，漏写一个就可能让小屏布局崩掉。这些隐式规则，才是日常调试里最耗时间的地方。
