align-items: baseline 能让Flex子项按文本基线对齐，适用于表单等文字排版场景。其原理是将不同字体大小或行高的子项基线对齐至同一水平线，忽略高度差异。只需在容器设置 display: flex 和 align-items: baseline 即可生效，常用于 label、input、button 等混合组件布局，视觉更协调。需注意仅对直接子元素有效，无内联内容则对齐不明显，且推荐在非等高需求中使用。现代浏览器及IE10以上均支持。
在CSS Flex布局中，align-items: baseline 是一种特殊的对齐方式，它能让Flex容器内的项目按照文本基线（baseline）对齐，常用于需要文字排版对齐的场景，比如表单标签与输入框、按钮与文字等。
理解 baseline 对齐原理
文本的“基线”（baseline）是指字母如 x、o、n 等底部对齐的那条线。不同字体、字号或行高的元素，其基线位置可能不一致。align-items: baseline 会忽略项目的高度，只让它们的文本基线对齐。
使用该属性时，Flex容器会：
- 将所有子项的文本基线对齐到同一条水平线上
- 不考虑子项的高度差异
- 适用于主轴为横向（row）的Flex布局
基本语法与结构
.container {
display: flex;
align-items: baseline;
}
<p>.item {
/<em> 子项可拥有不同字体大小或内边距 </em>/
}</p>只需在Flex容器上设置 align-items: baseline，所有直接子元素就会按基线对齐。
立即学习“前端免费学习笔记（深入）”；
实际应用场景示例
常见于表单设计中，确保标签和输入框的文字在同一水平线上：
<div class="form-row"> <label>姓名：</label> <input type="text" placeholder="请输入姓名"> <button>提交</button> </div>
CSS样式：
.form-row {
display: flex;
align-items: baseline;
gap: 8px;
}
<p>label {
font-size: 14px;
}</p><p>input {
font-size: 16px;
padding: 4px;
}</p><p>button {
font-size: 15px;
padding: 6px 12px;
}</p>尽管 input 和 button 的字体大小和 padding 不同，但它们的文字基线会自动对齐，视觉上更协调。
注意事项与兼容性
使用 baseline 对齐时需注意：
- 仅对 Flex 直接子元素生效
- 若子项是块级元素且无内联内容，对齐效果可能不明显
- 在垂直居中或高度一致的布局中，推荐使用 center 或 stretch
- 浏览器支持良好（IE10+ 及现代浏览器均支持）
基本上就这些。只要理解了文本基线的概念，align-items: baseline 就能帮你轻松实现自然的文字对齐效果，特别适合混合组件的排版需求。不复杂但容易忽略。
