表单左右布局在移动端如何自动转成上下排列？

你这个问题很常见，我之前也踩过这个坑。原理是这样：flex布局默认不会换行，即使屏幕变窄，子元素也会被压缩而不是变成上下结构。要实现移动端上下排列，得用媒体查询配合flex-wrap和宽度重置。

先说解决方案，分三步改你的代码：

第一步，给容器加上允许换行
.form-row {
display: flex;
gap: 20px;
/ 关键点：允许换行 /
flex-wrap: wrap;
}
不加flex-wrap: wrap的话，再怎么改媒体查询都不会换行。

第二步，把label的固定宽度改成可变的，否则在窄屏下还是会撑开
.label {
/ 改成min-width，这样可以收缩 /
min-width: 150px;
/ 加个最大宽度限制 /
max-width: 150px;
}

第三步，最关键的是加媒体查询，在小屏幕时让label占满一行
/ 当屏幕宽度小于768px时触发 /
@media (max-width: 768px) {
.form-row {
/ 确保这里还是wrap /
flex-wrap: wrap;
}

.label {
/ 在窄屏下，让label独占一行 /
min-width: 100%;
max-width: none;
/ 可以加个底部间距，让label和input之间有空隙 /
margin-bottom: 8px;
}

.input {
/ input也占满一行 /
width: 100%;
flex: none; / 去掉弹性，避免某些浏览器问题 /
}
}

这样改完的效果是：大屏幕上还是左右布局，到手机尺寸时label会自动换行变成上下结构。

原理是利用了flex-wrap: wrap这个特性，当容器设置换行后，子元素如果放不下就会自动折到下一行。配合媒体查询，在小屏幕时把label的宽度强制设为100%，它自然就独占一行了，后面的input也会另起一行。

有个细节要注意：如果你的表单有多个输入项，每个.form-row都要单独处理，不然会出现错位。建议每个表单项都包在一个独立的form-row容器里。

最后提醒一点，768px这个断点可以根据实际需求调整，比如用576px或者直接用(max-height: 500px)来判断手机横屏状态。我一般会连height一起判：
@media (max-width: 768px) and (max-height: 500px)
这样能更精准识别手机横屏场景。

应该是这样改，用媒体查询判断小屏幕时切换成列布局：

@media (max-width: 768px) {

  .form-row {

    flex-direction: column;

  }



  .label {

    width: auto;

  }

}

这样小屏幕时会自动变成上下排列，记得调整一下间距。