使用Flex布局可轻松实现表单中label与input的对齐，通过.form-group设置display: flex、align-items: center和gap实现水平对齐与间距，结合flex: 0 0 80px固定label宽度，flex: 1使input自适应填满剩余空间，提升美观性与维护性；在移动端通过@media (max-width: 600px)将flex-direction设为column，实现垂直排列，增强响应式体验；对于并排输入项，使用.inline-group容器配合flex: 1实现等宽分布，避免浮动带来的布局问题，整体结构清晰稳定。
使用Flex布局可轻松实现表单中label与input的对齐，通过.form-group设置display: flex、align-items: center和gap实现水平对齐与间距，结合flex: 0 0 80px固定label宽度，flex: 1使input自适应填满剩余空间，提升美观性与维护性；在移动端通过@media (max-width: 600px)将flex-direction设为column，实现垂直排列，增强响应式体验；对于并排输入项，使用.inline-group容器配合flex: 1实现等宽分布，避免浮动带来的布局问题，整体结构清晰稳定。在表单布局中，使用CSS Flex弹性盒子可以轻松实现input与label的对齐，让页面结构更清晰、响应式更强。传统浮动或表格布局容易出现错位、换行混乱等问题，而Flex布局通过简单的属性设置就能解决这些痛点。
基本结构：label与input的包裹容器
为了使用Flex布局，建议将每组label和input放在一个共同的父容器中，例如div，这样可以独立控制每一行的对齐方式。
然后为.form-group启用Flex布局：
.form-group {
display: flex;
align-items: center; /* 垂直居中对齐 */
gap: 10px; /* label与input之间的间距 */
margin-bottom: 10px;
}
这样label和input会水平排列，并且垂直方向自动居中对齐，避免了因字体大小或行高不一致导致的错位问题。
固定label宽度 + input自适应伸缩
在实际项目中，通常希望所有label保持相同宽度以对齐，而input填满剩余空间。这可以通过设置flex属性实现。
.form-group {
display: flex;
align-items: center;
gap: 10px;
}
.form-group label {
flex: 0 0 80px; / 不伸缩，固定宽度80px /
text-align: right;
}
.form-group input {
flex: 1; / 占据剩余空间 /
}
其中flex: 0 0 80px表示该元素不增长、不收缩、基础宽度80px，确保所有标签宽度一致；flex: 1让输入框自动撑开。
垂直表单与响应式处理
如果需要在小屏幕上切换为垂直排列（label在上，input在下），可以通过媒体查询关闭Flex的横向排列。
@media (max-width: 600px) {
.form-group {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.form-group label {
text-align: left;
width: 100%;
}
.form-group input {
width: 100%;
}
}
此时每组表单项变为上下结构，更适合移动端阅读和操作。
多列输入项的布局技巧
对于并排输入项（如“城市”“邮编”），也可以用Flex实现等宽分布。
.inline-group {
display: flex;
gap: 10px;
}
.inline-group .form-group {
flex: 1; / 平均分配空间 /
}
这种方式比浮动更稳定，无需清除浮动，也不受HTML顺序影响。
基本上就这些。Flex布局让表单的label与input对齐变得直观又灵活，配合gap、flex和响应式断点，能快速构建美观、易维护的表单界面。
