align-items: baseline 可使Flex子元素按文本基线对齐，适用于不同字号文本的整齐排版，通过设置容器 display: flex 和 align-items: baseline 即可实现，常用于表单、导航等场景，需注意仅对含内联内容的元素生效，图片等非文本元素可能需额外调整。
在CSS中使用Flexbox进行布局时，align-items: baseline 是一种非常实用的对齐方式，特别适合让容器内的文本内容在基线（baseline）上对齐，使文字看起来更整齐自然。
理解 align-items: baseline 的作用
align-items 控制Flex容器中子元素在交叉轴（cross axis）上的对齐方式。baseline 值会让所有子元素按照它们内部文本的基线对齐。这在处理不同字号或行高的文本时尤其有用，避免因字体大小差异导致视觉错位。
例如，当多个flex项包含不同 font-size 的文字时，使用 flex-start 可能让顶部不齐，而 baseline 能确保文字“坐”在同一根线上。
如何使用 align-items: baseline 实现文本基线对齐
要实现这一效果，只需在Flex容器上设置 display: flex 和 align-items: baseline：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
align-items: baseline;
}
.item1 { font-size: 16px; }
.item2 { font-size: 20px; }
.item3 { font-size: 14px; }
此时，三个不同字号的文字会以其基线为基准对齐，即使高度不同，文本看起来也像写在同一行纸上。
实际应用场景与注意事项
- 适用于表单标签与输入框组合、导航菜单图标+文字、卡片标题与描述等需要文本视觉对齐的场景。
- 只有当子元素包含内联内容（如文本）时，baseline对齐才有效果。纯块级空元素无法正确对齐。
- 若某个子元素是图片或其他非文本元素，其基线默认为底部边缘，可能影响整体对齐效果，需通过调整
align-self或外边距微调。 - 注意中文字体和英文字体的基线可能存在细微差异，跨语言设计时建议预览测试。
基本上就这些。用好 align-items: baseline，可以让文本布局更细腻自然，提升界面的专业感。不复杂但容易忽略细节。
