flex-wrap在小屏下失效的根本原因是父容器缺宽度限制或子项用固定像素宽；需设max-width:100%、用flex:1或相对单位，并检查white-space/min-width等阻止收缩的样式。
flexbox 的 flex-wrap 为什么在小屏下没起作用？
常见现象是：一组 div 设了 display: flex 和 flex-wrap: wrap，但在手机上仍横向溢出、不换行。根本原因往往是父容器没设宽度限制或子项用了固定宽（如 width: 200px），导致 flex 无法触发换行条件。
- 确保父容器有明确的宽度约束，比如
max-width: 100%或配合媒体查询设width: 100% - 子项避免用固定像素宽，优先用
flex: 1、flex: 0 1 auto或相对单位（%、rem） - 检查是否意外设置了
white-space: nowrap或min-width: fit-content等阻止收缩的样式
如何用 @media + flex-direction 切换堆叠方向？
这是响应式中最轻量的布局切换方式：桌面横排、移动端竖排。关键不是重写结构，而是改 flex 容器的行为。
section {
display: flex;
flex-direction: row;
}
@media (max-width: 768px) {
section {
flex-direction: column;
}
}-
flex-direction: column会自动让子项从上到下排列，无需修改 HTML 结构 - 如果需要反向堆叠（比如底部内容优先），可用
flex-direction: column-reverse - 注意：
column模式下，justify-content控制的是垂直方向对齐，别误用成水平对齐逻辑
为什么 flex: 1 在某些设备上撑不满高度？
典型场景：侧边栏 + 主内容区，希望主区占满剩余高度，但实际只包裹内容。这是因为 flex 子项默认不继承父容器高度，除非父容器本身有明确高度值。
- 必须向上追溯，确保所有父级（包括
html、body）都设了height: 100%或min-height: 100vh - 更可靠的做法是给 flex 容器设
min-height: 100vh，再配合flex-direction: column和子项flex: 1 - 慎用
height: 100%，它依赖父级精确高度；min-height: 100vh更适配响应式场景
移动端按钮组用 gap 还是 margin？
现代 flex 布局中，gap 是首选。它不会影响子项的盒模型计算，也不用担心首尾多出的外边距，且能随 flex-wrap 自动作用于换行后的行间/列间。
立即学习“前端免费学习笔记（深入）”；
.btn-group {
display: flex;
gap: 0.5rem;
}
@media (max-width: 480px) {
.btn-group {
flex-direction: column;
gap: 0.25rem; /* 小屏缩小间距 */
}
}-
gap在 Safari 14.1+、Chrome 89+、Firefox 63+ 均已稳定支持，移动端可放心用 - 若需兼容老 Android Webview（如 UC 内核），降级方案是用
margin+:not(:first-child)选择器 - 不要混用
gap和margin，否则间距会叠加
flexbox 的响应式能力很强，但它的“自适应”不是自动发生的——每一步都需要你明确告诉浏览器：在什么条件下，以什么方式收缩、换行或重排。最常被忽略的是高度继承链和 flex-wrap 的触发阈值，而不是语法本身。
