align-items: baseline 可使flex子元素的文本基线对齐，适用于不同字体大小的表单、按钮组等场景；结合 flex 属性可实现空间分配与视觉对齐的统一，需注意所有项目应含文本内容以确保对齐效果正常。
在CSS中使用Flexbox控制行内元素对齐时，align-items: baseline 是一种非常实用的方式，尤其适用于让不同高度的flex项目在文本基线（baseline）上对齐。这种对齐方式常用于表单、按钮组或标题与副标题并排显示的场景。
理解 align-items: baseline 的作用
当设置 align-items: baseline 时，flex容器内的子元素会根据其内部文本的基线进行对齐，而不是顶部、中心或底部对齐。这在处理不同字体大小或行高的文本内容时特别有用。
注意：对于 flex-direction: row（默认方向），align-items 控制的是交叉轴（即垂直方向）的对齐方式。
结合 flex 实现灵活布局
你可以将 flex 属性与 align-items: baseline 结合使用，让某些子元素占据更多空间，同时保持文本基线对齐。
立即学习“前端免费学习笔记（深入）”；
示例场景：一个标签和输入框并排，希望它们的文本对齐：
<div class="flex-container"> <label>姓名</label> <input type="text" placeholder="请输入姓名" /> <span class="hint">请输入真实姓名</span> </div>
.flex-container {
display: flex;
align-items: baseline; /* 关键：基线对齐 */
gap: 8px;
}
<p>label {
flex: 1; /<em> 占据较少空间 </em>/
font-size: 16px;
}</p><p>input {
flex: 2; /<em> 占据更多宽度 </em>/
padding: 8px;
font-size: 18px; /<em> 字号更大，基线对齐仍有效 </em>/
}</p><p>.hint {
flex: 3; /<em> 提示文字可能较小 </em>/
font-size: 14px;
color: #666;
}</p>在这个例子中，虽然 label、input、hint 的字体大小不同，但它们的文本基线会对齐，视觉上更协调。
注意事项与兼容性
使用 align-items: baseline 需要注意以下几点：
- 所有flex项目必须包含文本内容，否则基线对齐可能不生效或表现异常。
- 如果某个子元素是图片或纯图标（无文本），它的基线可能按底部计算，影响整体对齐效果。
- 在 flex-direction: column 时，align-items: baseline 的行为不同，适用于水平方向的基线对齐，使用较少。
- 浏览器支持良好，现代浏览器均支持该属性。
基本上就这些。通过 align-items: baseline 与 flex 的配合，可以轻松实现美观且语义清晰的文本对齐布局，特别适合表单控件组合。不复杂但容易忽略细节。
