使用 flex-direction: column 与 gap 可实现响应式表单布局，小屏幕垂直堆叠控件并保持合理间距；通过媒体查询在大屏幕切换为横向排列，结构清晰、维护简便，是现代CSS推荐做法。
在CSS中制作响应式表单控件排列，使用 flex-direction: column 与 gap 是一种简洁高效的方式。这种方式能让表单在小屏幕下自然堆叠，同时保持控件之间的合理间距，无需依赖复杂的媒体查询或额外的HTML结构。
使用 flex-direction: column 垂直排列控件
将表单容器设为弹性布局，并设置主轴方向为垂直，可以让所有表单项从上到下依次排列。这特别适合移动设备上的输入体验。
.container {display: flex;
flex-direction: column;
}
每个表单控件（如 label + input 组合）可作为 flex 容器中的一个子项。这种结构语义清晰，易于维护。
利用 gap 设置控件间距
gap 属性用于设置弹性子项之间的间距，支持行间距和列间距。在垂直排列中，gap 控制的是上下两个控件之间的距离。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: column;
gap: 1rem;
}
相比 margin 或 padding，gap 不会出现在容器边缘，避免头部和尾部多余的空白。它更干净、直观，是现代布局的推荐做法。
响应式适配不同屏幕
如果需要在大屏幕上切换为横向排列（例如两列），可以结合媒体查询调整 flex-direction 和 flex-wrap：
@media (min-width: 768px) {.container {
flex-direction: row;
flex-wrap: wrap;
}
.form-item {
flex: 1 1 45%;
}
}
而小屏幕下依然保持 column + gap 的垂直堆叠，确保操作便利性。
完整示例代码
.container {display: flex;
flex-direction: column;
gap: 1rem;
}
.form-item label {
display: block;
margin-bottom: 0.25rem;
}
基本上就这些。column + gap 让表单结构清晰、响应迅速，是现代CSS布局中的实用组合。不复杂但容易忽略。
