CSS Flexbox 暗坑：align-items 在 column 下变成水平居中

现象

移动端视口下，卡片标题”分类分布”和”上游来源分布”始终显示为水平居中。但 CSS 里明明写了 text-align: left 和 justify-content: flex-start，桌面端也是左对齐。只有移动端居中。

根因

这是一个典型的 Flexbox 暗坑——align-items 的作用方向取决于 flex-direction。

/* 桌面端样式（正常工作） */
.card-header {
    display: flex;
    flex-direction: row;              /* 默认：水平排列 */
    justify-content: flex-start;      /* ✅ 水平方向左对齐 */
    align-items: center;              /* ✅ 垂直方向居中（不受影响） */
}

/* 移动端覆盖（踩坑） */
.card-header {
    flex-direction: column !important; /* 切换为垂直排列 */
    justify-content: flex-start;       /* ⚠️ 现在控制垂直方向！ */
    align-items: center;               /* ⚠️ 现在控制水平方向！居中！ */
}

关键理解：flex-direction 切换时，两个属性控制的方向也跟着互换。

flex-direction	justify-content 控制	align-items 控制
row (默认)	水平方向	垂直方向
column	垂直方向	水平方向

当 flex-direction: column 时，align-items: center 不再垂直居中，而是水平居中。这就是标题始终居中的根本原因。

修复

/* 移动端覆盖（正确） */
.card-header {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;  /* 同时覆盖 align-items */
}

教训

1. Flexbox 的 align-items 和 justify-content 方向相关，不能只看名字理解。
2. 切换 flex-direction 时，必须重新检查所有 flex 对齐属性。
3. flex-direction 改变时，align-items 和 justify-content 都显式重写，不依赖继承。
4. 调试时不要只看 text-align——元素在 flex 容器内时，text-align 可能被 align-items 覆盖。

检测方法

用 Playwright 获取精确的 bounding box 可以快速定位这类问题：

positions = page.evaluate('''() => {
    const card = document.querySelector(".card");
    const cardRect = card.getBoundingClientRect();
    const title = document.querySelector(".card-title");
    const rect = title.getBoundingClientRect();
    return {
        distFromCardLeft: rect.left - cardRect.left,
        centerOffset: (rect.left + rect.width/2) - (cardRect.left + cardRect.width/2),
    };
}''')

• centerOffset ≈ 0 → 居中
• centerOffset < 0 → 偏左（左对齐正常）
• centerOffset > 0 → 偏右（右对齐正常）

参考文献

• MDN: flex-direction
• MDN: align-items
• MDN: justify-content