使用 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 控制的是上下两个控件之间的距离。

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

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

.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布局中的实用组合。不复杂但容易忽略。