使用 flex-direction: column 可实现表单垂直布局，通过设置容器为 Flex 并结合 gap 与 align-items 控制间距和对齐，配合嵌套结构优化标签与输入框组合，再利用 width: 100% 统一输入宽度，最后借助媒体查询适配响应式，从而构建清晰易维护的表单。
使用 Flexbox 制作表单布局时，将 flex-direction 设置为 column 是实现垂直排列的常用方式。这种方式特别适合移动端或需要从上到下堆叠表单项的设计场景。它让每个表单元素（如 label 和 input）自然地垂直分布，结构清晰且易于维护。
设置容器为 Flex 并启用垂直方向
要让表单内的元素垂直排列，先将表单容器设为 flex 容器，并指定主轴方向为 column。
示例代码：
form {
display: flex;
flex-direction: column;
gap: 12px; /* 控制表单项之间的间距 */
max-width: 400px;
margin: 0 auto;
}
这样所有直接子元素（如 label、input、button）都会沿垂直方向依次排列，无需额外浮动或定位。
优化输入框与标签的组合结构
建议将每个 label 和对应的 input 包裹在一个容器中，便于统一控制样式和间距。
立即学习“前端免费学习笔记（深入）”；
HTML 结构示例：
然后对这些 div 应用 flex 布局，也可以进一步调整内部对齐方式。
控制对齐与响应式适配
在垂直布局中，常配合 align-items 和 width 来统一输入框宽度。
CSS 补充建议：- 设置 align-items: stretch 让所有子项宽度拉满容器
- 为 input 添加 width: 100% 确保填充父容器
- 在小屏幕上默认垂直，在大屏可结合媒体查询切换为其他布局
form {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
input, button {
width: 100%;
padding: 8px;
}
基本上就这些。用 flex-direction: column 搭配合理的嵌套结构，就能快速构建语义清晰、响应友好的表单布局，不复杂但容易忽略细节对齐。
