align-self用于控制单个弹性子元素在交叉轴上的对齐方式，可覆盖父容器的align-items设置。其常用取值包括auto（继承父级）、flex-start（顶部对齐）、flex-end（底部对齐）、center（居中）、baseline（基线对齐）和stretch（拉伸填充）。例如当容器设置align-items: center时，为某个子元素设置align-self: flex-end可使其单独向下对齐。使用前提是父容器为Flex布局（display: flex或inline-flex），且交叉轴方向受flex-direction影响；若子元素有固定高度，stretch可能无法完全生效。合理使用align-self能精确调整个别元素的垂直位置而不影响整体布局。
在 CSS Flexbox 布局中，align-self 属性用于控制单个弹性子元素（即“单元格”）在其交叉轴上的对齐方式，也就是实现垂直方向的偏移或对齐。它会覆盖父容器中 align-items 的设置，只作用于当前子元素。
align-self 可用值及效果
以下是 align-self 支持的主要取值及其表现：
auto：默认值，继承父容器的 align-items 设置。 flex-start：元素顶部对齐（在垂直方向上靠上）。 flex-end：元素底部对齐（在垂直方向上靠下）。 center：元素在交叉轴居中对齐。 baseline：元素基线对齐。 stretch：拉伸元素以填满容器（除非有固定尺寸）。
实际使用示例
假设有一个 Flex 容器，内部包含三个子元素，我们想让中间那个元素向下对齐：
顶部对齐我往下偏移了仍居中
在这个例子中：
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情
立即学习“前端免费学习笔记（深入）”；
容器设置了 align-items: center，所以所有子项默认垂直居中。 第二个子项添加了 align-self: flex-end，因此它会单独向下对齐。
注意事项
要使 align-self 生效，必须满足以下条件：
父容器是 Flex 布局（display: flex 或 display: inline-flex）。 交叉轴方向取决于 flex-direction。例如，当主轴为 row 时，垂直方向就是交叉轴，align-self 控制的就是垂直对齐。 如果子元素设置了固定高度或 min-height，stretch 效果可能不会完全拉伸。基本上就这些。用好 align-self 能让你灵活控制个别元素的垂直位置，而不影响整体布局。
以上就是css align-self控制单元格垂直偏移的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1059580.html
微信扫一扫 
支付宝扫一扫 
