在表单开发场景中，label标签和input输入框的对齐是前端开发的基础需求，传统使用浮动或者定位的方式实现对齐，往往需要编写大量冗余代码，并且在表单元素尺寸变化、多行布局时容易出现样式错乱的问题。CSS Flex弹性盒子布局凭借其灵活的对齐规则和自适应特性，能够用极少的代码实现各类表单对齐需求，大幅提升开发效率。
Flex布局基础概念回顾
Flex布局的核心是父容器设置display: flex属性后，内部子元素会成为弹性项目，通过容器的对齐属性可以控制所有子元素的排列方式。在表单对齐场景中，我们主要用到以下几个核心属性：
- justify-content：控制弹性项目在主轴上的对齐方式，比如
flex-start左对齐、center居中对齐、space-between两端对齐等 - align-items：控制弹性项目在交叉轴上的对齐方式，比如
center垂直居中对齐、flex-start顶部对齐等 - flex：子元素的弹性缩放属性，可以设置子元素占据剩余空间的比例
单行表单label与input对齐实现
最常见的单行表单场景是label在左，input在右，两者在同一行且垂直居中对齐，实现代码如下：
/* 表单行容器样式 */
.form-row {
display: flex;
align-items: center; /* 垂直居中对齐 */
margin-bottom: 16px;
width: 100%;
}
/* label基础样式 */
.form-label {
width: 80px; /* 固定label宽度，保证多行表单对齐一致 */
margin-right: 12px;
text-align: right; /* 文字右对齐，靠近input */
font-size: 14px;
color: #333;
}
/* input样式 */
.form-input {
flex: 1; /* 占据剩余宽度 */
height: 32px;
padding: 0 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
对应的HTML结构如下：
<div class="form-row">
<label class="form-label" for="username">用户名</label>
<input class="form-input" type="text" id="username" placeholder="请输入用户名">
</div>
<div class="form-row">
<label class="form-label" for="password">密码</label>
<input class="form-input" type="password" id="password" placeholder="请输入密码">
</div>
上述代码中，.form-row作为Flex容器，设置align-items: center让label和input垂直居中，label固定宽度保证所有表单行的label对齐，input设置flex:1自动填充剩余空间，适配不同宽度的表单容器。
多行表单对齐适配
如果label文字较长需要换行，或者input是多行文本域<textarea>，只需要调整align-items属性即可实现顶部对齐：
/* 多行表单行样式 */
.form-row-multiline {
display: flex;
align-items: flex-start; /* 顶部对齐 */
margin-bottom: 16px;
width: 100%;
}
/* 多行文本域样式 */
.form-textarea {
flex: 1;
height: 80px;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
resize: vertical;
}
对应的HTML结构：
<div class="form-row-multiline">
<label class="form-label" for="desc">详细地址</label>
<textarea class="form-textarea" id="desc" placeholder="请输入详细地址"></textarea>
</div>
这里将容器的align-items改为flex-start，label和文本域都会顶部对齐，即使label文字换行或者文本域高度变化，两者也能保持顶部对齐的效果。
常见对齐问题及解决方法
label和input垂直偏移问题
如果发现label和input没有完全垂直居中，通常是因为input默认有边框或者内边距导致高度计算偏差，可以给input设置统一的盒模型属性：
.form-input, .form-textarea {
box-sizing: border-box; /* 边框和内边距计入宽度高度 */
}
响应式场景下的对齐适配
在小屏幕设备上，可以让表单行从水平排列改为垂直排列，只需要添加媒体查询：
@media (max-width: 768px) {
.form-row, .form-row-multiline {
flex-direction: column; /* 垂直排列 */
align-items: flex-start; /* 左对齐 */
}
.form-label {
width: 100%;
margin-right: 0;
margin-bottom: 8px;
text-align: left;
}
.form-input, .form-textarea {
width: 100%;
}
}
这样在移动端表单元素会垂直排列，label在input上方，更符合小屏幕的操作习惯。
总结
使用CSS Flex弹性盒子布局处理表单中label和input的对齐问题，相比传统布局方式代码更简洁，适配性更强。核心思路是将表单行的容器设置为Flex容器，通过align-items控制垂直对齐，通过flex属性控制input的宽度分配，再结合少量场景化的属性调整，就能覆盖绝大多数表单对齐需求。开发者可以根据实际项目的表单样式要求，灵活调整Flex相关属性，快速实现符合预期的布局效果。