使用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 允许换行，避免水平滚动或遮挡。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

推荐组合写法：

.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，配合媒体查询和弹性尺寸，就能让表单在手机端自然、有序地展示。