手机表单需设父容器flex-direction: column并配合max-width:100%、flex-shrink:0及显式line-height等，避免iOS/Android渲染差异导致错位、溢出或文字偏移。
手机上表单字段挤成一排怎么办
Flexbox 默认是 flex-direction: row，桌面端看着整齐，手机一缩就溢出或文字折断。这不是“没适配”，是没关掉默认横向布局。
- 所有表单项父容器加
display: flex的同时，必须显式设flex-direction: column - 别依赖媒体查询“等屏幕小了再改”，直接在基础样式里写死
flex-direction: column，再用@media (min-width: 768px)升级为横排 -
label和input套在同一层div里，否则flex-direction: column对它们不起作用
输入框宽度在iOS上忽大忽小
iOS Safari 对 input[type="text"] 有默认最小宽度（约 150px），加上 flex 的自动伸缩，经常撑开整个容器。不是 bug，是渲染策略。
- 给
input加flex: 1或width: 100%，但必须配合max-width: 100% - 禁用 iOS 自动缩放：
input { -webkit-appearance: none; }，否则圆角/内边距会干扰 flex 计算 - 如果用了
rem或em设宽，确保根字体大小没被 viewport 缩放干扰（检查是否含user-scalable=no）
提交按钮和输入框错位或换行异常
常见于 button 没设 flex-shrink: 0，或者 input 有 margin 导致总宽超 100%。Flex 容器不会自动“忽略” margin。
- 按钮统一加
flex-shrink: 0，防止被压缩变形 - 所有子元素（
label、input、button）外边距用margin-bottom控制间距，别混用margin-top - 避免在
input上设padding-left同时又设box-sizing: content-box——移动端计算更敏感，容易触发重排错位
Android Chrome 里 placeholder 文字偏上
不是对齐问题，是 line-height 和 padding 在不同引擎下解析不一致。Flex 布局放大了这个差异。
- 给
input显式设line-height: 1.5（数值，别用normal） - 确保
height和line-height匹配，例如height: 48px; line-height: 48px;，再配padding: 0 12px - 别用
vertical-align试图调 placeholder——它对 placeholder 无效，只影响 inline 元素基线
真正麻烦的不是怎么堆叠，而是堆叠之后各浏览器对 flex-basis、min-content 和表单控件固有尺寸的解释差异。调一次得在三台真机上过一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
