使用 align-items: baseline 可使 flex 子元素的文字基线对齐，适用于主轴水平布局；2. 通过 align-self: baseline 可单独控制某个子元素的基线对齐，实现混合对齐效果；3. 基线对齐依赖文本内容，空元素或含替换元素（如图片）时可能表现异常，且在 flex-direction: column 时支持有限，需谨慎使用。
在 CSS Flexbox 中，让子元素基于 baseline 对齐是一种常见的布局需求，尤其适用于文本或行内元素高度不一致时的对齐场景。实现 baseline 对齐的关键是使用 align-items 或 align-self 属性设置为 baseline。
1. 使用 align-items: baseline 实现整体基线对齐
当希望所有 flex 子元素按照文字基线对齐时，在父容器上设置 align-items: baseline 即可。
flex-direction: row）的情况。
- 子元素的文字部分将按基线对齐，忽略其整体高度差异。
示例代码：
.container {
display: flex;
align-items: baseline;
}
<p>.item1, .item2, .item3 {
/<em> 子元素可以有不同的字体大小或行高 </em>/
font-size: 16px;
}</p><p>.item2 {
font-size: 24px;
}</p><p>.item3 {
font-size: 18px;
}
效果：尽管三个子项字号不同、高度不同，但它们的文字基线会保持在同一水平线上。
立即学习“前端免费学习笔记（深入）”；
2. 使用 align-self: baseline 控制单个子元素
如果只想让某个特定子元素参与基线对齐，而其他子元素使用不同的对齐方式，可以使用 align-self: baseline。
align-items 设置。
- 适合混合对齐场景。
示例：
.container {
display: flex;
align-items: center; /* 默认居中 */
}
<p>.special-item {
align-self: baseline; /<em> 单独设置基线对齐 </em>/
}
3. 基线对齐的注意事项
使用 baseline 对齐时需注意以下几点：
- 基线对齐依赖于元素内部的文本内容，若子元素无文本或内容为空，则对齐可能不符合预期。
- 对于包含图片或其他替换元素的 flex 项，浏览器会将其基线视为其底部边缘（inline-level 行为）。
- 在垂直方向堆叠（
flex-direction: column）时，align-items: baseline的行为不同——此时是依据侧轴方向的“首字母基线”进行对齐，实际支持有限且表现可能不一致，建议避免在此类布局中使用。 - 确保子元素的
display类型支持基线对齐（如 block、inline-block、flex 等）。
基本上就这些。只要理解了 align-items: baseline 的作用机制，并合理应用在行内内容高度不一的场景中，就能实现自然、美观的文字对齐效果。
