当前位置：首页 > 文章列表 > 文章 > 前端 > Grid布局align-self实用技巧解析

Grid布局align-self实用技巧解析

2026-02-11 23:13:55 0浏览收藏

从现在开始，努力学习吧！本文《Grid布局中align-self使用技巧》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

align-self用于控制单个网格项在区域内的垂直对齐，覆盖align-items；取值包括start（顶部）、end（底部）、center（居中）、stretch（拉伸）；可单独设置如.item2{align-self:center}实现独立对齐；配合margin可微调位置，适用于表单、卡片按钮底部固定等场景。

Grid布局中align-self属性如何使用_单个子元素对齐技巧

在CSS Grid布局中，align-self 属性用于控制单个网格项（子元素）在其所在网格区域内的垂直对齐方式。它覆盖父容器上设置的 align-items 属性，实现对特定子元素的独立对齐控制。

align-self 可用值说明

该属性支持以下几个常用取值：

start：元素与网格区域的起始边对齐（顶部）
end：元素与网格区域的结束边对齐（底部）
center：元素在网格区域内垂直居中
stretch：默认值，元素拉伸以填满整个网格区域（忽略 margin）

基本使用示例

假设有一个Grid容器和多个子元素：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch; /* 整体对齐方式 */
}

.item2 {
  align-self: center; /* 单独控制第二个子元素垂直居中 */
}

.item3 {
  align-self: end; /* 第三个子元素靠底部对齐 */
}

在这个例子中，虽然容器设置了 align-items: stretch，但 .item2 和 .item3 会按各自的 align-self 设置进行对齐，不受整体影响。