响应式表单项横排变竖排的关键是设父容器display: flex并改flex-direction，媒体查询用max-width（如480px）实现小屏降级，label与input竖排时统一左对齐并加display: block和margin-bottom，可选flex-wrap+min-width替代媒体查询。
响应式表单项横排变竖排的关键触发点
直接改 flex-direction 就行，但必须确保父容器是 display: flex，且子项没有强制设置 width 或 flex 导致换行失效。媒体查询的断点别硬套 768px —— 实际应基于内容撑开后的视觉临界点测出来。
媒体查询里该用 min-width 还是 max-width
用 max-width。因为目标是「小屏时竖排」，属于降级行为：默认横排（PC），小屏才切为竖排。写成 @media (max-width: 480px) 更符合直觉和维护习惯。若用 min-width，就得反着写默认竖排、大屏才横排，容易和设计稿脱节。
label 和 input 怎么对齐才不乱
横排时常用 label 左对齐 + input 右对齐；竖排时建议统一左对齐，并给 label 加 display: block 和 margin-bottom: 0.5em。注意避开这些坑：
-
label用了float或position: absolute—— 竖排时会脱离文档流，遮挡 input -
input设置了固定width: 200px—— 小屏下溢出容器，需改成width: 100%并加box-sizing: border-box - 父容器没设
gap或margin—— 竖排后表单项挤在一起，可统一用flex-direction: column; gap: 0.75em
有没有更轻量的替代方案（不用媒体查询）
有，用 flex-wrap: wrap + min-width 控制子项最小宽度，让浏览器自动折行。比如：
form { display: flex; flex-wrap: wrap; gap: 0.75em; }
.form-item { flex: 1 1 calc(50% - 0.375em); min-width: 280px; }
这样在宽度不足两个子项时，第二项自动换行，比媒体查询更弹性。但要注意：min-width 值得实测 —— 太小会过早换行，太大又卡死不响应。
真正麻烦的是带图标的复合表单项，或者 label 含多行文字的情况，这时候光靠 flex-direction 不够，得配合 align-items 和 justify-content 微调对齐基线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
