align-items-baseline 仅在交叉轴为水平方向（即主轴为 vertical）时才实现文字基线对齐；默认 row 主轴下交叉轴为 vertical，此时它使子元素内联文本的基线在垂直方向对齐，但要求子元素含文本且字体属性有差异。
align-items-baseline 只在交叉轴为水平时才管用
想让 Flex 子元素按文字基线对齐，得先确认主轴方向——align-items-baseline 作用于交叉轴，而基线对齐只有在交叉轴是水平方向（即主轴为 vertical）时才有意义。如果父容器只是 d-flex（默认 flex-direction: row），那交叉轴是 vertical，此时 align-items-baseline 会让所有子项的**文字基线在垂直方向上对齐**，但前提是它们都含内联级文本内容且字体大小/行高不一致。
常见错误是把它和 align-items-end 混用：后者让底边对齐，前者只拉齐文字底部（比如一个 <h3> 和一个 <button> 并排时，标题的“g”、“y”下延部分和按钮文字底部对齐，但按钮整体位置仍可能偏上）。
- 必须加在父容器上，且父容器要有
d-flex - 子元素若为块级且无文本（如空
<div>或仅含图标），baseline行为不可见 - 当子元素含
vertical-align、line-height或font-size差异大时，效果最明显
align-self-baseline 是给单个子项用的，但有前提
align-self-baseline 能覆盖父容器的 align-items 设置，但它只对 Flex 容器的**直系子元素**生效。比如你在一个 .row 里想让某个 .col 内部的按钮按基线对齐，不能把 align-self-baseline 加在按钮上——它不是 .row 的直接子项；得加在 .col 自身上。
另外，这个类要起效，父容器（比如 .row）必须有明确高度，否则没有“交叉轴空间”供基线参考。高度不足时，所有子项都会挤在顶部，baseline 就失去比较基准。
- 父容器没高度 →
align-self-baseline看不出效果 - 目标元素被嵌套两层以上 → 类名加了也无效
- 和
align-items-stretch共存时，stretch 会先拉高该列，再按基线对其内部文字，实际表现可能偏离预期
baseline 对齐容易被误判成“底部对齐”，其实不是
很多人看到 align-items-baseline 后子元素看起来“沉下去一点”，就以为是底部对齐，其实只是文字基线被拉平了。如果其中一项是纯图标（<i class="bi bi-x"></i>）、另一项是带 descender 的英文（如 “gyp”），它们的基线对齐后，图标的视觉底部往往仍高于文字底部。
真正需要底部对齐时，应选 align-items-end；需要整体居中留白（如卡片按钮沉底），该用 mt-auto；只有明确要协调多段文本的排版节奏（比如表单标签 + 输入框 + 单位文字并排），baseline 才是合理选择。
- 含 descender 字符（g, j, p, q, y）的文本，其基线在字符主体下方
- 图标字体（如 Bootstrap Icons）通常按 em-box 设计，基线位置未必和文本一致
- 混用不同
font-size或line-height时，baseline效果更难预测，建议统一基础排版值
响应式下 baseline 对齐要配断点前缀
Bootstrap 5 支持 align-items-sm-baseline、align-items-md-baseline 这类写法，但要注意：没有 xs 断点，最小从 sm 开始；且这些类只在对应断点及以上生效，低断点会回退到父容器默认或未设置的 align-items 值。
更关键的是，响应式换行（flex-wrap）会改变布局结构——一旦子元素换行，align-items-baseline 仍只控制每行内部的基线对齐，不会跨行拉齐。如果希望多行文本块整体基线一致，得靠 CSS Grid 或手动重置 vertical-align，Flex 本身不提供跨行基线控制能力。
- 小屏不换行时，
align-items-baseline正常工作 - 中屏启用
flex-wrap后，每行各自按基线对齐，行与行之间无关联 - 不要指望
align-content-baseline—— 这个类根本不存在
baseline 对齐是个精细活，多数时候不如 align-items-center 或 mt-auto 来得可控。它真正有用的地方，是当你在一行里并排放多个文本型控件，且对排版精度有要求时——其他场景，优先考虑更鲁棒的替代方案。 
