align-items: center不起作用的主因是标题和按钮不在同一flex容器的直接子级，必须同属一个父容器；若结构受限可用display: contents透传，但ie不支持。
标题和按钮不在同一行时，align-items: center 不起作用
常见错误是把标题（比如 <h2></h2>）和按钮（<button></button>）放在不同层级的容器里，比如标题在 .card-header，按钮在 .card-footer。这时即使外层设了 display: flex，它们也不是同一 Flex 容器的直接子项，align-items 根本不生效。
必须确保标题和按钮是**同一个父容器的直接子元素**，例如：
<div class="header-row"> <h2>服务介绍</h2> <button>立即咨询</button> </div>
-
.header-row设display: flex，且只包含这两个子元素 - 避免中间套一层
<div> 或 <code><span></span>—— 那会打断 Flex 对齐链 - 如果结构受限（如 CMS 输出不可改），可用
display: contents让中间容器“透传”子元素，但注意兼容性（IE 不支持）
按钮底部边框和文字底缘错位，别用 align-items: baseline
默认 align-items: baseline 是按文本基线对齐，而按钮的 border-bottom 往往落在基线下方，导致视觉上“悬空”。这不是 bug，是 baseline 的设计行为。
真正要的是**容器边界底部对齐**，所以该用：
.header-row {
display: flex;
align-items: flex-end; /* ✅ 关键 */
}
-
align-items: flex-end让所有子元素的**盒模型底部**对齐，按钮的border-bottom和段落最后一行文字底缘自然齐平 - 同时清除
<p></p>或<h2></h2>的默认margin-bottom，否则它会把对齐基准往下推 - 统一
line-height（比如设为1.4）能进一步减少字体渲染差异带来的微小偏移
响应式换行后对齐失效，flex-wrap: wrap 要配 align-content
小屏下标题过长，flex-wrap: wrap 没问题，但换行后按钮可能被挤到第二行右侧，和标题第一行不对齐。
这时候 align-items 控制单行内对齐，align-content 才管多行之间的垂直分布：
.header-row {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
align-content: flex-start; /* ✅ 让所有行都贴顶，按钮始终和标题首行底缘对齐 */
}
-
align-content: flex-start确保换行后各行顶部对齐，按钮不会“漂”到第二行底部 - 如果希望按钮始终和标题最后一行对齐，用
align-content: flex-end，但需保证标题至少占两行，否则按钮会悬空 - 别依赖
justify-content来“拉”按钮位置——它只影响主轴，对跨行对齐无效
按钮组内部间距用 gap，别碰 margin
如果按钮不止一个（比如「编辑」「删除」），在按钮组内部加 margin-right 很容易导致首尾多出空白，或破坏 align-items: flex-end 的计算逻辑。
现代方案直接用 gap：
<div class="header-row">
<h2>用户管理</h2>
<div class="btn-group">
<button>新增</button>
<button>导出</button>
</div>
</div>
.btn-group {
display: flex;
gap: 0.5rem; /* ✅ 清晰、可控、不影响 align-items */
}
-
gap是 Flex 和 Grid 原生间距控制，不参与 margin 折叠，也不干扰对齐基准 - 按钮本身不要设
width或固定margin，保持flex: 0 0 auto（默认值）即可 - 若需按钮等宽填充剩余空间，用
flex: 1+min-width限制最小尺寸，避免压缩过度
实际中最大的坑不是写错属性，而是结构层级没理清——Flex 对齐只作用于直接子项，嵌套一层就断链。对齐前先数一数 DOM 层级，比反复调样式更省时间。
