仅靠flex-direction无法自动堆叠表单控件，必须配合display: flex+媒体查询显式切换，并为子项设width: 100%或依赖align-items: stretch；常见错误是媒体查询中只写flex-direction: column而父容器未声明display: flex。
Flexbox 本身不能让表单控件“自动”堆叠——必须显式用媒体查询切换布局方向，并控制子项宽度，否则 flex-direction: column 不生效。
为什么只写 flex-direction: column 没反应
常见错误是只在媒体查询里加了 flex-direction: column，但父容器没始终声明 display: flex。Flex 属性只对弹性容器起作用，普通 div 或 form 即使写了 column 也当普通块级元素渲染。
- 检查父容器（如
form或包裹label/input的div）是否在所有断点下都有display: flex - 媒体查询中不要只写
flex-direction，应写全：display: flex; flex-direction: column; - 避免父容器有
height、min-height或overflow: hidden，它们会截断垂直排列后的内容
堆叠后 input 宽度不占满怎么办
在 flex-direction: column 下，主轴是垂直方向，交叉轴仍是水平方向，所以子项默认 width: auto，不会撑满父容器。
- 最稳妥：给每个表单控件（
input、select、textarea）加width: 100% - 依赖默认行为：确保父容器有明确宽度（如
max-width: 100%），且未设flex-shrink: 0，此时align-items: stretch（默认值）才有效 - 别混用
float或inline-block，它们会破坏 flex 上下文
用 gap 还是 margin-bottom 控制垂直间距
推荐用 gap，尤其在动态表单中更可靠。
立即学习“前端免费学习笔记（深入）”；
-
gap: 12px只作用于相邻项之间，末尾不留空；margin-bottom: 12px会让最后一项也多出空白 - 旧版 Safari（≤15.4）不支持
gap，可降级为：margin-bottom: 12px+:last-child { margin-bottom: 0 } - 已有
margin规则时，别叠加gap，否则间距翻倍
表单控件堆叠前必须做的三件事
很多失败案例漏掉其中一环：不是加个属性就完事，而是容器、方向、宽度、间隙四者联动。
- 父容器始终设
display: flex（不能只在桌面端写） - 小屏媒体查询内同时声明
flex-direction: column和align-items: stretch（显式更安全） - 所有控件加
box-sizing: border-box+width: 100%，并移除框架注入的min-width
真正容易被忽略的是：堆叠不是靠“自动”，而是靠“显式覆盖 + 宽度重置 + 间隙重设”。哪怕只漏掉 width: 100%，input 在手机上就会缩成一条细线。
