align-items: baseline 让 flex 子元素按文本基线对齐，适用于不同字号文字的垂直对齐，如导航栏图标与文字、表单标签等场景，提升视觉一致性，需注意子元素应包含可渲染文本以确保基线正确计算。
在 CSS Flexbox 布局中，align-items 属性用于控制 flex 容器中子元素在交叉轴（cross axis）上的对齐方式。其中，baseline 是 align-items 的一个取值，它让多个 flex 项目基于它们的文本基线（text baseline）进行对齐，常用于需要文字对齐的场景。
align-items: baseline 是什么？
当设置 align-items: baseline 时，flex 容器中的子元素会根据其内部文本的基线对齐，而不是顶部、底部或中心对齐。这在处理不同字号或行高的文本元素时特别有用，能实现视觉上更自然的文字对齐效果。
注意：主轴是水平方向（默认 flex-direction: row）时，交叉轴是垂直的，因此 align-items 控制的是垂直对齐方式。
如何使用 align-items: baseline
只需在 flex 容器上设置：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
align-items: baseline;
}
容器内的每个子元素将按其文字基线对齐。例如：
- 一个字体大小为 16px 的段落
- 一个字体大小为 24px 的标题
- 一个字体大小为 12px 的小标签
尽管它们的高度不同，但它们的文本基线会处于同一水平线上，看起来文字“排成一行”。
实际应用场景
这种对齐方式适合以下情况：
- 表单中标签与输入框的文本对齐
- 导航栏中图标与不同大小的文字对齐
- 卡片组件中多行不同字号文本的对齐
例如，在导航菜单中，图标通常是正方形，而文字大小不一，使用 align-items: baseline 可以让图标的底部与文字基线大致对齐，提升可读性和美观度。
注意事项
使用 baseline 时需注意：
- 所有子元素必须有可渲染的文本内容，否则基线可能无法正确计算
- 如果子元素是图片或其他非文本内容，浏览器会使用其
vertical-align行为或默认基线（通常是底部）参与对齐 - 在
flex-direction: column时，align-items: baseline的行为不同，适用于侧向排列的文本基线对齐，但支持较弱，需谨慎使用
基本上就这些。align-items 用 baseline 能有效解决多尺寸文本的自然对齐问题，是布局中提升细节体验的一个实用技巧。不复杂但容易忽略。
