使用 display: flex + flex-wrap: wrap 可实现自动多列布局，但需设置子项 flex-basis 或 min-width（如 300px）、align-items: flex-start、min-height 预留错误空间，并在小屏用媒体查询切 column 模式。
直接用 display: flex + flex-wrap: wrap 就能实现，不需要媒体查询也能自动从一列切到多列，但必须控制子项宽度和容器行为，否则容易错行或撑破布局。
表单项必须设固定或可计算的宽度
Flex 容器不会主动“均分”空间给表单项；如果 input 或 .form-group 没有显式宽度，它们会默认占满整行（flex-basis: auto），导致永远只有一列。
- 推荐给每个
.form-group设置flex-basis: 300px或min-width: 300px，这样容器够宽时自然并排 - 避免只写
width: 50%—— 它在 flex 中可能被flex-shrink压缩，尤其当内容短、浏览器试图压缩空隙时 - 若需“尽可能多列”，用
flex: 1 1 240px（即flex-grow: 1,flex-shrink: 1,flex-basis: 240px），让项目在最小宽度基础上弹性伸缩
容器必须启用换行且禁用默认拉伸
align-items: stretch 是默认值，会让所有表单项高度强行对齐——一旦某个 label 换行或验证提示出现，整行高度会被拉高，破坏视觉节奏。
- 务必加
align-items: flex-start，让每个表单项顶部对齐 - 必须设
flex-wrap: wrap，否则超出容器宽度的项目会溢出或缩小，不会换行 - 慎用
justify-content: space-between—— 当最后一行项目数不足时，间隙分布会不均匀，建议用flex-start或center
验证错误信息会撑高表单项，必须预留空间
很多表单在提交失败后动态插入 .error-message，若没提前考虑高度变化，会导致该行其他表单项被顶下去，甚至触发意外换行。
- 给
.form-group加min-height: 72px（含 label + input + 预留 error 高度），比依赖 JS 动态重排更稳定 - 错误文案用
position: absolute覆盖在下方，不参与 flex 流，但要确保父级position: relative - 避免把
error放在input后面又不设flex-basis，它可能被当成新 flex 项目，打乱原有排列
移动端窄屏下强制单列的兜底写法
纯靠 flex-wrap 在极窄视口（如竖屏手机）可能仍挤出两列，造成文字截断或操作困难，此时需媒体查询干预。
- 加
@media (max-width: 480px) { .form-container { flex-direction: column; } } - 注意：这里改的是
flex-direction，不是flex-wrap—— column 方向下无需 wrap，所有项目天然垂直堆叠 - 如果表单里混用了
textarea或长文本select，它们在 column 模式下也要统一设width: 100%，否则可能窄于容器
真正难的不是写几行 Flex 代码，而是预判表单项在各种状态（空值、长标签、错误提示、不同字体渲染）下的实际占用尺寸。宽度设太死会卡住换行逻辑，设太活又容易在小屏上错列——得在 flex-basis 和 min-width 之间反复调几次真实设备才能稳住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
