手机上用 flex-direction: column 替代 row 并配合 max-width 媒体查询可实现竖排布局；column 下子项不自动占满宽度，需显式设 width: 100%；推荐用 gap 替代 margin 避免末尾空白，且注意容器高度设置防溢出。
flex-direction: row 在手机上不换行？用媒体查询切 column
默认 flex-direction: row 会让子项横向排列，哪怕容器窄到挤不下——它不会自动折行，除非你加 flex-wrap: wrap。但很多人想的是“手机上竖着排”，这时候直接切 flex-direction: column 更干脆，也更可控。
- 只改
flex-direction不加flex-wrap，能避免子项在小屏上意外折成多行（比如三个按钮折成两行再加一行空隙） -
column下子项自然从上到下堆叠，语义清晰，滚动方向也符合直觉 - 注意：如果子项本身设了
height或min-height，在column下可能撑高容器，导致内容被截或出现意外空白
@media 中断点选 max-width 还是 min-width？
用 max-width 更稳妥。因为目标是“手机窄屏时切换布局”，不是“宽屏才启用某样式”。max-width: 480px 或 max-width: 767px 是常见选择，但别硬套像素值。
- 优先用
max-width: 48em这类相对单位，适配缩放和不同设备根字号 - 避免用
min-width+flex-direction: column，否则在中等宽度（如 iPad 横屏）可能误触发，又没地方回退 - 如果项目已用 CSS 自定义属性控制断点，确保媒体查询里读取的是计算后值，而不是未生效的
var(--bp-sm)（Sass/Less 编译时需展开）
flex-direction: column 后，子项 width 自动变 100%？
不会。Flex 子项在 column 主轴是垂直方向，交叉轴仍是水平方向，所以 width 默认仍为 auto，表现取决于内容或父容器约束。
- 常见错觉：按钮文字短，看起来“占满”，其实是文本居中+内边距撑开；加个
width: 100%才真占满 - 如果子项是
input或textarea，记得加width: 100%，否则它们会按默认宽（如input约 130px）显示 - 用
align-items: stretch（flex 默认值）能让子项在交叉轴拉满，但前提是父容器有明确宽度约束，否则无效
换 column 后，margin-bottom 叠加出额外空白？
会。尤其是多个子项都设了 margin-bottom，在 column 下每项底部都留空，最后一项也留，视觉上像多了一截空白。
立即学习“前端免费学习笔记（深入）”；
- 解决方法之一：用
gap替代margin，gap在column下只作用于项与项之间，末尾不留空 - 方法之二：保留
margin-bottom，但给最后一项加:last-child { margin-bottom: 0 } - 注意：如果子项是动态渲染（比如 Vue/React 列表），
:last-child可能不准确，此时gap更可靠
最易忽略的是 flex 容器自身的 min-height 或 height 设置——一旦在 column 模式下又设了固定高，内容超长就直接溢出不可见。别假设“竖着排=安全”，得看容器有没有给足空间。
