掌握margin和align-self属性可精准控制Flexbox中单个子元素对齐。1. 使用margin-left:auto将元素推至右侧，margin-top:auto推至底部；2. align-self覆盖父容器align-items设置，实现单独垂直对齐；3. 组合margin与align-self使元素定位到角落，如右下角按钮布局。关键在于理解auto margin吸收剩余空间的机制。
在使用 CSS Flexbox 布局时，对齐单个子元素常常会让人困惑，尤其是当其他子元素默认占据空间时。其实只要掌握几个关键属性，就能精准控制某个特定子元素的对齐方式。
理解父容器的对齐与子项的覆盖
Flexbox 的对齐主要由父容器通过 justify-content、align-items 等属性控制整体布局，但你可以让某个子元素“打破规则”，通过以下方式单独调整：
- margin 是最简单有效的方法之一
- 使用 align-self 覆盖垂直对齐
- 利用 auto margin 实现水平方向推离
用 margin 推动单个子元素对齐
如果想让一个子元素靠右或居下，可以给它设置自动外边距。例如，在横向主轴上：
.container {display: flex;
}
.item-right {
margin-left: auto;
}
这样 .item-right 就会被推到容器最右侧，即使其他元素靠左排列。同理，margin-top: auto 可以将子元素推到底部（在交叉轴上）。
立即学习“前端免费学习笔记（深入）”；
使用 align-self 控制单个垂直对齐
若父容器设置了 align-items: center，所有子元素都会垂直居中。但你可以让某个子元素不同：
align-self: flex-start; /* 或 flex-end、center、baseline */
}
这个属性允许单个子元素脱离 align-items 的统一设定，实现顶部、底部或基线对齐。
组合技巧：让一个元素独占角落
比如你想让某个按钮始终在右下角，而其他内容正常排列：
.container {display: flex;
flex-direction: column;
height: 100vh;
}
.content {
margin-bottom: auto;
}
.button {
align-self: flex-end;
margin-top: auto;
}
这里 margin-bottom: auto 把内容顶上去，margin-top: auto 和 align-self: flex-end 让按钮贴住右下角。
基本上就这些。不需要复杂计算，灵活运用 margin 和 align-self 就能解决大多数单个子元素对齐问题。关键是理解自动 margin 会吸收剩余空间，从而推动元素到目标位置。
