手机端表单必须用垂直流式布局，所有控件默认垂直堆叠；通过.form-group包裹、display:block、width:100%、input宽度100%+box-sizing:border-box杜绝并排；Flex/Grid响应式需靠flex-basis或repeat(2,1fr)控制列数，错误提示须绝对定位且同属.form-group并配aria-live。
手机端表单必须用垂直流式布局
移动端屏幕窄、手指操作精度低，所有表单控件（input、textarea、select、button）默认必须垂直堆叠，不能靠 float 或 inline-block 强行并排。否则会出现横向溢出、点击区域过小、标签错位等问题。
关键不是“怎么让它们不并排”，而是从结构上杜绝并排可能：
- 每个表单项用
<div class="form-group">包裹，不依赖父容器 flex/grid 的初始方向 - 给
.form-group设display: block和width: 100%，确保撑满容器 - 所有
input、textarea默认宽度设为100%，但必须配合box-sizing: border-box，否则 padding/border 会撑出容器 - 禁用
max-width或固定像素宽——手机屏宽不一，320px在 iPhone SE 和 Galaxy S24 上表现完全不同
用 Flexbox 实现「手机竖排 → 平板双列」的切换
别在手机样式里写 flex-direction: column，那是冗余的。直接从移动端默认状态出发，只在大屏加规则：
- 容器设
display: flex+flex-wrap: wrap，子项默认flex-basis: 100% - 平板断点（≥768px）改子项
flex-basis: calc(50% - 0.5rem)，再配gap: 1rem控制间距 - 千万别只改
flex-direction：它不改变子项尺寸，flex-basis才是控制“占多少宽度”的关键 -
label和input必须同属一个.form-group，否则媒体查询下 label 可能留在左边、input 跑到右边，读屏器顺序就乱了
Grid 方案里最常踩的坑是列定义写死
很多人写 @media (min-width: 1024px) { grid-template-columns: 1fr 1fr; }，结果 iPad 横屏（≈1024px）刚好卡在两列，但内容挤得看不清。真正稳的做法是用自动计算：
立即学习“前端免费学习笔记（深入）”；
- 默认（手机）：
grid-template-columns: 1fr - 平板起：
@media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); } - 桌面起：
@media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr); } - 所有断点统一用
1fr，不用%或px，避免因父容器 padding 导致列宽计算错误 -
gap: 1rem必须写在容器上，比用margin更可靠——margin在grid下容易被忽略或叠加
表单验证错误信息会让布局突然变高
提交失败后插入的 <div class="error">邮箱格式错误</div> 会把下面的控件往下顶，造成跳动。这不是视觉问题，是可访问性风险（屏幕阅读器会重读整个区域）：
- 错误提示元素必须和对应控件在同一个
.form-group内，且用position: absolute+top: 100%浮出，不参与文档流 - 给
.form-group设min-height（比如min-height: 3.5rem），预留错误提示空间，防止高度突变 - 别用
visibility: hidden隐藏错误提示——它仍占空间；要用display: none，但 JS 插入时立刻设为block并触发重排 - 所有错误文本用
aria-live="polite"，让读屏器感知变化，而不是靠视觉跳动来提示用户
真正难的不是让表单在手机上“看起来像一列”，而是让它的结构、语义、交互反馈在任何尺寸下都保持一致。一旦把逻辑锚定在容器级布局（Flex/Grid）和子项尺寸控制（flex-basis / grid-template-columns）上，那些“为什么点不到”“为什么错位”“为什么读屏器读乱了”的问题，基本就消失了。
