通过设置flex容器的flex-direction控制主轴方向，并利用margin:auto实现子元素对齐。例如，.form-container使用column方向排列字段，.form-actions中通过margin-left:auto将提交按钮右对齐，.login-form结合margin-top:auto将“忘记密码”链接推至底部，实现灵活响应式表单布局。
在CSS中使用Flexbox布局来对齐表单元素非常高效，尤其是结合 flex-direction 与 margin 属性时，可以轻松实现各种对齐需求。关键在于理解容器的主轴方向以及如何利用自动外边距（margin: auto）或显式间距控制子元素位置。
设置 Flex 容器与方向
要开始使用 Flexbox 布局，先将表单或其容器设为 flex 容器，并根据布局需要选择主轴方向。
常见场景：-
水平排列标签与输入框：使用
flex-direction: row（默认值） -
垂直堆叠表单字段：使用
flex-direction: column
示例代码：
.form-container {
display: flex;
flex-direction: column; /* 字段垂直排列 */
gap: 12px; /* 控制字段间间距 */
}
.form-row {
display: flex;
flex-direction: row; /* 标签和输入框并排 */
align-items: center;
}
使用 Margin 实现灵活对齐
在 Flex 子元素上使用 margin 可以快速调整对齐方式，特别适合按钮、辅助链接等元素的定位。
立即学习“前端免费学习笔记（深入）”；
典型用法：- 让提交按钮靠右对齐：给按钮左侧设置
margin-left: auto - 居中某个提示文字：使用
margin: 0 auto并配合justify-content: center
示例：
.form-actions {
display: flex;
}
.form-actions .submit-btn {
margin-left: auto; /* 按钮推到右侧 */
}
这样即使前面有多个按钮或元素，提交按钮也会紧贴容器右边缘。
结合 Flex Direction 与 Margin 的实用布局
当 flex-direction: column 时，margin-top 或 margin-bottom 配合 auto 可实现垂直方向的对齐。
- 将“忘记密码”链接推到底部：
margin-top: auto - 在卡片式登录表单中，让按钮始终位于底部且居中：
margin: auto
代码示例：
.login-form {
display: flex;
flex-direction: column;
height: 400px;
justify-content: space-between;
}
.forgot-link {
margin-top: auto; /* 推到内容底部 */
}
基本上就这些。通过合理设置 flex-direction 控制流向，再用 margin 调整特定元素位置，就能实现干净、响应式的表单对齐效果，无需额外包装或复杂计算。
