align-self 要生效，父容器必须是 flex 上下文；它只在交叉轴起作用，不替代 justify-content；auto 继承 align-items，默认 stretch；多行时需区分 align-items（每行内）与 align-content（行间分布）。
align-self 要生效，父容器必须是 Flex 上下文
直接给子元素写 align-self: center 却没效果？大概率是父容器漏了 display: flex 或 display: inline-flex。浏览器会静默忽略 align-self，不报错也不渲染——这是最常被忽略的前提。
注意：align-self 只在交叉轴起作用，和主轴无关；它也不能替代 justify-content（Flex 中没有 justify-self）。
- 若父容器设了
flex-direction: column，交叉轴变成水平方向，align-self: center就是让子项水平居中，不是垂直居中 -
align-self: auto不等于“不设置”，它继承父容器的align-items值；若父容器没设align-items，则按默认stretch处理，子项可能被意外拉高 - 想让某子项“不拉伸”，又不想硬编码尺寸，可显式写
align-self: auto并确保父容器有明确的align-items
用 CSS 类或属性选择器批量控制对齐行为
不需要每个子项都写内联样式，用类名或自定义属性更易维护。比如：
[data-align="bottom"] { align-self: flex-end; }
.flex-item--right { align-self: flex-end; }
这样 HTML 里直接加属性或类就行：
<div class="flex-container"> <div>默认对齐</div> <div data-align="bottom">底部对齐</div> <div class="flex-item--right">右侧对齐（column 时）</div> </div>
- 属性选择器适合语义化强、逻辑清晰的场景（如表单控件、卡片操作区）
- 类选择器更适合复用频繁的布局模式（如统一右对齐的操作按钮组）
- 避免用
:nth-child等结构伪类做对齐控制——它依赖 DOM 顺序，一增一删就失效
多行 Flex 容器中，align-content 和 align-items 别混用
当子项换行（flex-wrap: wrap）后，对齐控制分两层：
-
align-items：控制**每行内**子项在交叉轴上的对齐（如所有子项顶部对齐） -
align-content：控制**所有行之间**在交叉轴上的分布（如多行上下居中、首尾贴边） - 如果只设了
align-content却没设flex-wrap: wrap，该属性完全无效 - 若容器高度固定且子项总高度小于容器，
align-content: center才能真正把行组垂直居中；否则浏览器按内容撑高，视觉上无变化
最后一行子项左对齐的实用解法
用 justify-content: space-between 时，最后一行不满就会右偏——这不是 bug，是设计行为。要让它左对齐，得绕开 justify-content 的全局控制：
- 方案一：用
margin-right模拟间隙，配合:nth-child动态修正最后一行末尾元素的右外边距（需已知每行列数） - 方案二：改用
justify-content: flex-start+ 子项加margin-right控制间距，最后一行自然左对齐 - 方案三：容器设
text-align: left，子项设display: inline-block—— 这种“伪 Flex”在简单场景反而更可控
真正动态的场景（比如响应式列数变化），纯 CSS 很难完美覆盖；此时建议 JS 计算剩余项数并打标记类，再由 CSS 针对性处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
