使用 flex-direction: column 可实现表单垂直布局，通过设置容器为 Flex 并结合 gap 与 align-items 控制间距和对齐，配合嵌套结构优化标签与输入框组合，再利用 width: 100% 统一输入宽度，最后借助媒体查询适配响应式，从而构建清晰易维护的表单。
使用 Flexbox 制作表单布局时，将 flex-direction 设置为 column 是实现垂直排列的常用方式。这种方式特别适合移动端或需要从上到下堆叠表单项的设计场景。它让每个表单元素（如 label 和 input）自然地垂直分布，结构清晰且易于维护。
要让表单内的元素垂直排列，先将表单容器设为 flex 容器，并指定主轴方向为 column。
示例代码：
form {
display: flex;
flex-direction: column;
gap: 12px; /* 控制表单项之间的间距 */
max-width: 400px;
margin: 0 auto;
}
这样所有直接子元素（如 label、input、button）都会沿垂直方向依次排列，无需额外浮动或定位。
建议将每个 label 和对应的 input 包裹在一个容器中，便于统一控制样式和间距。
立即学习“前端免费学习笔记（深入）”；
HTML 结构示例：
<form>
<div>
<label for="name">姓名</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email">邮箱</label>
<input type="email" id="email" name="email">
</div>
<button type="submit">提交</button>
</form>
然后对这些 div 应用 flex 布局，也可以进一步调整内部对齐方式。
在垂直布局中，常配合 align-items 和 width 来统一输入框宽度。
CSS 补充建议：
form {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
<p>input, button {
width: 100%;
padding: 8px;
}
基本上就这些。用 flex-direction: column 搭配合理的嵌套结构，就能快速构建语义清晰、响应友好的表单布局，不复杂但容易忽略细节对齐。
以上就是如何在CSS中使用Flexbox制作表单布局_flex-direction column实现垂直排列的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
653
收藏
