使用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;
}
.form-container .field {
flex: 1 1 200px; / 最小宽度约 200px，允许伸缩 /
}
这样在窄屏下，每个控件会自动换行并合理分配空间。
结合媒体查询优化体验
根据设备宽度动态调整布局，提升可用性。
完整响应式策略：- 大屏：横向排列，节省垂直空间
- 小屏：纵向排列，提高可操作性
- 中间状态：多列换行，平衡密度与易用性
@media (min-width: 769px) {
.form-container {
flex-direction: row;
}
.form-container .field {
flex: 1 1 300px;
}
}
@media (max-width: 768px) {
.form-container {
flex-direction: column;
}
.form-container .field {
flex: 1 1 auto;
}
}
基本上就这些。灵活运用 flex-direction 和 flex-wrap，配合媒体查询和弹性尺寸，就能让表单在手机端自然、有序地展示。
