直接设flex-direction: column不够用，因其是静态方向切换，不感知屏幕尺寸；需配合媒体查询或flex-wrap: wrap+min-width实现响应式堆叠。
为什么直接设 flex-direction: column 不够用
很多开发者一上来就给表单容器加 flex-direction: column，结果发现所有设备都垂直了——这违背了“小屏才堆叠”的响应式本意。关键在于：这个属性是**静态方向切换**，它不感知屏幕尺寸，也不会自动回退。你真正需要的不是“永远垂直”，而是“窄屏触发垂直、宽屏恢复水平”。所以纯靠 flex-direction 无法实现条件性堆叠，必须配合换行机制或媒体查询。
用 flex-wrap: wrap + min-width 实现无媒体查询堆叠
这是最轻量、兼容性最好的方案，核心逻辑是：让两个表单项在宽屏时并排，当宽度不够时自动换行成上下结构。它不依赖断点数值，行为由浏览器根据真实可用空间计算，更鲁棒。
-
display: flex和flex-wrap: wrap必须同时设置在父容器（如.form-row）上 - 每个表单项（如
.form-group）设min-width: 300px（或根据内容调整），等价于告诉浏览器：“我至少要这么宽，别压缩我” - 用
gap: 12px控制间距，比margin更稳定，不会因外边距合并出错 - 避免写
width: 50%——它在临界宽度（比如刚好 600px）下极易因滚动条、缩放或字体渲染差异导致换行失败
.form-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.form-group {
min-width: 300px;
flex: 1;
box-sizing: border-box;
}
什么时候必须加媒体查询
当你的表单结构更复杂，比如有“姓名+邮箱”并排、“地址+电话”并排，但又希望所有并排组在 ≤768px 时统一垂直，这时纯 flex-wrap 可能不够精准——因为每组的 min-width 总和可能不一致，换行时机难统一。此时媒体查询就是明确的控制开关。
- 在
@media (max-width: 768px)内，把所有并排容器设为flex-direction: column - 同时重置子项的
width或flex，防止它们仍试图占满整行 - 别忘了给输入框加
width: 100%，否则在column下可能收缩成窄条 - 如果用了
gap，它在column下依然生效，无需额外处理
容易被忽略的盒模型陷阱
表单元素（input、select、textarea）默认 box-sizing: content-box，加上 padding 和 border 后，实际宽度会超出设定值，导致小屏下换行异常或横向溢出。
立即学习“前端免费学习笔记（深入）”；
- 务必在所有表单控件上加
box-sizing: border-box - 不要单独给
input设固定width: 300px，应设width: 100%并约束其父容器宽度 - 若使用
flex: 1，需确认父容器有明确宽度来源（比如max-width或继承自 flex 容器），否则伸缩行为不可控
真正难调的不是写法，而是不同设备对 min-width 的像素级计算差异——建议在真机上测 320px、375px、414px 这几个典型宽度，而不是只看模拟器。
