Baseline对齐是使文本基线在同一水平线对齐的布局方式，常用于表单标签与输入框、按钮与文字等场景；在Flex和Grid布局中，通过align-items: baseline实现，确保不同字体大小或行高的元素视觉上协调一致。
在CSS布局中，使用 baseline 对齐可以让多个子元素基于文本基线对齐，这在需要保持文字排版一致性的场景中非常实用，比如表单控件与标签对齐、按钮和文字组合等。
什么是 baseline 对齐？
Baseline 是指文本字符底部对齐的基准线。不同字体或行高的元素，其基线位置可能略有差异。当设置为 baseline 对齐时，浏览器会自动调整元素位置，使它们的基线保持在同一水平线上。
在 Flex 布局中使用 baseline 对齐
Flexbox 支持通过 align-items 或 align-self 使用 baseline 值实现子元素基线对齐。
常见用法：- align-items: baseline; — 容器内所有子项按基线对齐
- align-self: baseline; — 单个子项单独设置基线对齐
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
align-items: baseline;
}
.item1, .item2, .item3 {
font-size: 16px;
}
此时即使子元素字体大小或行高不同，它们的文字基线也会尽量对齐，视觉上更协调。
在 Grid 布局中使用 baseline 对齐
CSS Grid 也支持 baseline 对齐，适用于多行或多列的复杂布局。
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
- align-items: baseline; — 沿着行轴方向，单元格内容基线对齐
- justify-items: baseline; — 不适用，baseline 主要用于 align-* 方向
- align-content: baseline; — 多轨道对齐时可用（较少见）
Grid 中使用示例：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: baseline;
}
这样两个列中的文本输入框和标签就能自然地基线对齐，避免“高低不一”的问题。
实际应用场景
baseline 对齐特别适合以下情况：
- 表单中
label和input并排显示时对齐文字 - 按钮和旁边的文字图标组合保持文字对齐
- 不同字号的文本块需要视觉上对齐基线
注意：如果元素是块级或没有内联内容，baseline 对齐可能不会如预期生效，建议确保参与对齐的元素包含可渲染的文本内容。
基本上就这些，合理使用 baseline 能提升界面细节质感，尤其在注重排版的项目中很实用。
