用 align-self: flex-start 可让 Flex 容器中单个项目顶部对齐，其余继承 align-items: center 居中；需确保容器为 flex-direction: row（默认），且避免误用于 column 方向。
Flex容器里单个项目顶部对齐，其余居中 —— 用 align-self 最直接
Flex布局中，align-items 控制所有子项在交叉轴（通常是垂直方向）的对齐方式，但如果你只想让某一个项目顶部对齐，其他保持居中，就不能只靠容器级设置。核心解法是：容器设 align-items: center，再给那个特殊项目单独加 align-self: flex-start。
注意：这个行为依赖于容器是 flex-direction: row（默认值），此时交叉轴是垂直的；如果容器是 column，交叉轴变成水平，align-self 就影响左右对齐，别误用。
常见错误现象：
– 给项目设了 margin-top: 0 或 vertical-align: top —— 这俩在 Flex 里完全无效；
– 容器用了 align-items: flex-start 然后试图用 margin 把其他项目“往下推”——不可靠，响应式下容易错位。
实操建议：
– 确保父容器有 display: flex 和明确的 align-items: center；
– 目标项目加上 align-self: flex-start；
– 不需要额外 wrapper、伪元素或绝对定位，纯 CSS 原生支持。
立即学习“前端免费学习笔记（深入）”；
为什么不用 margin 或 position？
有人会想用 margin-top: auto 或 position: relative; top: -Xpx 拉某个项目上去，但这会破坏 Flex 的对齐逻辑：
– margin-top: auto 在 flex-direction: row 下对交叉轴无效，只有主轴（水平）才响应 margin-left/right: auto；
– 手动写 top 值必须知道容器高度和项目尺寸，一旦字体缩放、行高变化或响应式断点切换，就失准；
– position: absolute 会让项目脱离文档流，可能遮挡后续内容，且无法参与 Flex 的自动空间分配。
而 align-self 是 Flex 规范原生能力，不干扰布局流，也不依赖具体像素值，语义清晰、可维护性强。
align-self 的兼容性与边界情况
现代浏览器（Chrome 29+、Firefox 20+、Safari 9+、Edge 12+）都支持 align-self，IE10/11 也支持，但有个坑：
– IE11 对 align-self 在某些嵌套 Flex 容器中偶有渲染延迟，可加 transform: translateZ(0) 强制硬件加速缓解；
– 如果项目本身设置了 float 或 clear，align-self 会被忽略（Flex 项目不能同时是浮动元素）；
– 当项目是 visibility: hidden 时，align-self 仍生效，只是你看不见——这点常被忽略，调试时注意。
示例代码：
.container {
display: flex;
align-items: center;
height: 200px;
}
.item-first {
align-self: flex-start; /* 就这一行让它顶上 */
}
.item-other {
/* 不写 align-self，继承 container 的 center */
}如果容器是 flex-direction: column 怎么办？
这时交叉轴是水平方向，align-items 控制左右对齐，align-self: flex-start 就会让项目左对齐，不是“顶部”。要实现「某个项目左对齐、其余居中」，逻辑一样，只是语义变了：
– 容器设 flex-direction: column; align-items: center；
– 目标项目加 align-self: flex-start → 左对齐；
– 若想让它“顶部对齐”，其实是主轴对齐问题，该用 justify-content 或 margin-top: 0 配合 justify-self（但注意 justify-self 在 Flex 中不被支持，只能靠 margin 或重排顺序）。
所以关键还是先确认主轴和交叉轴方向，别把 align-self 和 justify-content 搞混。
真正容易被忽略的是：Flex 的对齐行为永远由「容器的 flex-direction」决定，而不是你主观觉得“顶部”在哪。写之前花三秒看一眼容器的主轴方向，能省掉一半调试时间。
