小屏下必须用 flex-direction: column——它让 label 和 input 垂直堆叠，避免因宽度不足导致换行错乱或溢出；用 row 在手机上基本等于自找麻烦，除非明确控制子项 min-width 并启用 flex-wrap。
移动端表单错位，flex-direction 该设成 column 还是 row？
小屏下必须用 flex-direction: column——它让 label 和 input 垂直堆叠，避免因宽度不足导致换行错乱或溢出。用 row 在手机上基本等于自找麻烦，除非你明确控制了所有子项的 min-width 并启用了 flex-wrap。
常见错误是只在 @media (max-width: 768px) 里切方向，但平板横屏（比如 iPad 1024×768）也可能需要竖排。更稳妥的做法是：容器宽度 column，否则 row；或者直接默认 column，大屏再覆盖为 row。
align-items 设成 flex-start 而不是 center 的原因
input、select、textarea 和 label 的默认基线（baseline）不同，align-items: center 会让它们视觉上错位——尤其当字体大小、line-height 或内边距不一致时。而 flex-start 强制顶部对齐，不依赖尺寸统一，容错率高。
- 别用
stretch：它会让label拉伸到整个容器高度，通常不是想要的效果 - 若需
label右侧垂直居中于input（如复选框场景），应在单个表单项内部用display: flex; align-items: center，而不是在外层容器上设
flex 缩写值怎么配才不踩坑？
给 label 和 input 直接设固定宽（比如 width: 120px）是响应式灾难的起点。应该用 flex 的收缩/增长能力分配空间：
立即学习“前端免费学习笔记（深入）”；
-
label推荐flex: 0 0 auto：不拉伸、不压缩、按文字内容自适应宽度 -
input推荐flex: 1 1 200px：优先填满剩余空间，最小宽 200px，超宽时可压缩 - 多个并排控件（如「省 + 市」）用
flex: 1配合min-width: 120px，防过窄
为什么 gap 比 margin 更适合表单间距？
gap 是 Flex 和 Grid 原生支持的间距属性，它只作用于子元素之间，不会影响首尾元素的外边距，也不触发 margin 合并问题。而用 margin-bottom 给每个 input 加间隙，最后一项会多出无用空白，还得额外清掉。
更关键的是：gap 在 flex-wrap 场景下依然可靠——比如两列布局换行时，行与行之间的间隙也能自动生效；margin 则无法跨行控制。
实际项目里容易忽略的是：移动端触控目标至少 44px 高，input 的 height 或 padding 应确保点击区域达标，这比单纯调 gap 更影响可用性。
