css justify-self与align-self在子元素中使用_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-10-16

浏览次数：次

justify-self用于Grid布局中控制子元素在行内轴（横轴）的对齐，如center、start等；align-self在Grid和Flexbox中均有效，控制块轴（纵轴）对齐，如center、flex-start。前者仅适用于Grid，后者通用，优先级高于父容器设置。

css justify-self与align-self在子元素中使用

在 CSS Grid 或 Flexbox 布局中，justify-self 和 align-self 用于控制子元素在其容器内的对齐方式，但它们作用的方向不同。理解这两个属性的关键在于明确主轴与交叉轴、以及布局上下文（Grid vs Flexbox）。

justify-self 主要用于 Grid 布局 中的子元素，决定该项目在单元格内的水平对齐方式（即行内轴方向）。

常见取值包括：

示例：

.container {
  display: grid;
  grid-template-columns: 100px 100px;
}
.item {
  justify-self: center; /* 在列单元格内水平居中 */
}

注意：在 Flexbox 中 justify-self 不生效，因为主轴对齐由父容器的 justify-content 控制，子项无法单独使用 justify-self 调整主轴位置。

align-self 在 Grid 和 Flexbox 中都可用，用于控制单个子项在交叉轴上的对齐方式。

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

常见取值：

在 Grid 中示例：

.item {
  align-self: center; /* 在行单元格内垂直居中 */
}

在 Flexbox 中示例：

.flex-container {
  display: flex;
  align-items: flex-start;
}
.flex-item {
  align-self: center; /* 此项单独垂直居中，其余按容器设置对齐 */
}

基本上就这些。掌握这两个属性的重点是分清布局模式和轴方向。Grid 提供更精细的二维控制，而 Flexbox 更偏向一维流动布局。align-self 更通用，justify-self 是 Grid 特有的横向控制工具。不复杂但容易忽略细节。

以上就是css justify-self与align-self在子元素中使用的详细内容，更多请关注其它相关文章！

上一篇：css框架Bulma制作卡片动画效果

下一篇：J*aScript异常处理与调试技巧