align-self用于控制单个网格项在网格区域内的垂直对齐，可覆盖align-items设置。取值包括flex-start（顶部）、flex-end（底部）、center（居中）、stretch（拉伸，默认）和baseline（基线对齐）。例如在display: grid容器中，.item-center{align-self:center}使该元素%ignore_a_1%，.item-bottom{align-self:flex-end}使其底部对齐，而其他项仍按align-items:stretch拉伸。注意仅直系子元素有效，且需确保父容器为网格布局。
在CSS网格布局中，align-self 属性用于控制单个网格元素在其网格区域内的垂直对齐方式。它会覆盖容器上设置的 align-items 属性对该元素的影响，只作用于当前这个特定的子元素。
1. 基本语法
在某个网格项（grid item）上使用：
align-self: flex-start | flex-end | center | stretch | baseline;
2. 可用值及其效果
以下是 align-self 支持的主要取值：
flex-start：元素与网格区域的顶部对齐flex-end：元素与网格区域的底部对齐center：元素在网格区域内垂直居中stretch：元素拉伸以填满整个网格区域（默认行为）baseline：按基线对齐，适用于多个元素文本对齐场景
3. 实际示例
假设你有一个网格容器和几个子元素：
立即学习“前端免费学习笔记（深入）”；
九歌
九歌–人工智能诗歌写作系统
322 查看详情 .grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: stretch; /* 默认所有项目拉伸 */
height: 200px;
}
.item-center {
align-self: center; /* 单独控制这个元素垂直居中 */
}
.item-bottom {
align-self: flex-end; /* 这个元素靠底部对齐 */
}
在这个例子中：
所有子元素默认会被拉伸填满高度但添加了 .item-center 的元素会在其格子内垂直居中.item-bottom 元素则会贴到底部
4. 注意事项
确保父容器是 display: grid，否则 align-self 不会按网格规则生效。该属性只对直系子元素有效，且仅影响交叉轴（通常是垂直方向）上的对齐。
基本上就这些，用起来很简单，适合微调个别元素的位置。
以上就是在css中如何使用align-self控制单个网格元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1032984.html
微信扫一扫 
支付宝扫一扫 
