使用 flex-direction 和 flex-wrap 可解决手机端表单控件错乱问题。设置display:flex 启用 弹性布局 ，通过媒体查询在小屏（max-width:768px）时设 flex-direction:column 实现垂直 排列，大屏时设 row 实现横向布局；配合 flex-wrap:wrap 允许换行，避免溢出；为子元素设置 flex:1 1 200px（小屏auto）使控件自适应宽度并合理分配空间，实现响应式多列或单列显示，提升移动端操作体验。
在手机端表单控件 排列 错乱，通常是因为布局没有适配小屏幕。使用 flex-direction 和 flex-wrap 可以有效解决 响应式布局 中的控件排列问题。
设置容器为 Flex 布局
确保表单或控件的父容器启用了 Flex 布局，这是实现灵活排列的基础。
示例代码：
.form-container {display: flex;}使用 flex-direction 控制排列方向
在手机端，通常希望控件垂直 堆叠显示，便于点击输入。通过将 flex-direction 设置为 column，可以让子元素从上到下排列。
移动端适配 设置：
@media (max-width: 768px) {.form-container { flex-direction: column;} }启用 flex-wrap 防止溢出
当控件较多或宽度不一时，可能超出容器边界。使用 flex-wrap: wrap 允许换行，避免水平滚动或遮挡。
立即学习 “ 前端免费学习笔记（深入）”；
推荐组合写法：
.form-container {display: flex; flex-wrap: wrap;} <p>.form-container .field {flex: 1 1 200px; /<em> 最小宽度约 200px，允许伸缩 </em>/}这样在窄屏下，每个控件会自动换行并合理分配空间。
结合媒体查询优化体验
根据设备宽度动态调整布局，提升可用性。
完整响应式策略：
- 大屏：横向排列，节省垂直空间
- 小屏：纵向排列，提高可操作性
- 中间状态：多列换行，平衡密度与易用性
@media (min-width: 769px) {.form-container { flex-direction: row;} .form-container .field {flex: 1 1 300px;} } <p>@media (max-width: 768px) {.form-container { flex-direction: column;} .form-container .field {flex: 1 1 auto;} }基本上就这些。灵活运用 flex-direction 和 flex-wrap，配合媒体查询和弹性尺寸，就能让表单在手机端自然、有序地展示。
以上就是
