justify-self用于Grid布局中控制子元素在行內(nèi)軸（橫軸）的對(duì)齊，如center、start等；align-self在Grid和Flexbox中均有效，控制塊軸（縱軸）對(duì)齊，如center、flex-start。前者僅適用于Grid，后者通用，優(yōu)先級(jí)高于父容器設(shè)置。

在 CSS Grid 或 Flexbox 布局中，justify-self 和 align-self 用于控制子元素在其容器內(nèi)的對(duì)齊方式，但它們作用的方向不同。理解這兩個(gè)屬性的關(guān)鍵在于明確主軸與交叉軸、以及布局上下文（Grid vs Flexbox）。

justify-self：控制行內(nèi)軸（橫軸）對(duì)齊

justify-self 主要用于 Grid 布局 中的子元素，決定該項(xiàng)目在單元格內(nèi)的水平對(duì)齊方式（即行內(nèi)軸方向）。

常見取值包括：

• start：靠單元格起始邊對(duì)齊
• end：靠單元格結(jié)束邊對(duì)齊
• center：居中對(duì)齊
• stretch：拉伸以填滿單元格（默認(rèn)值）

示例：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

.container {
  display: grid;
  grid-template-columns: 100px 100px;
}
.item {
  justify-self: center; /* 在列單元格內(nèi)水平居中 */
}

注意：在 Flexbox 中 justify-self 不生效，因?yàn)橹鬏S對(duì)齊由父容器的 justify-content 控制，子項(xiàng)無法單獨(dú)使用 justify-self 調(diào)整主軸位置。

騰訊元寶

騰訊混元平臺(tái)推出的AI助手

223

查看詳情

align-self：控制塊軸（縱軸）對(duì)齊

align-self 在 Grid 和 Flexbox 中都可用，用于控制單個(gè)子項(xiàng)在交叉軸上的對(duì)齊方式。

常見取值：

• flex-start / start：頂部對(duì)齊
• flex-end / end：底部對(duì)齊
• center：垂直居中
• stretch：拉伸填滿容器（默認(rèn)）
• baseline：基線對(duì)齊（文本場(chǎng)景常用）

在 Grid 中示例：

.item {
  align-self: center; /* 在行單元格內(nèi)垂直居中 */
}

在 Flexbox 中示例：

.flex-container {
  display: flex;
  align-items: flex-start;
}
.flex-item {
  align-self: center; /* 此項(xiàng)單獨(dú)垂直居中，其余按容器設(shè)置對(duì)齊 */
}

關(guān)鍵區(qū)別總結(jié)

• justify-self：僅在 Grid 中有效，控制橫向（行內(nèi)軸）對(duì)齊
• align-self：在 Grid 和 Flexbox 中都有效，控制縱向（塊軸）對(duì)齊
• Flexbox 子元素不能用 justify-self 調(diào)整主軸位置，應(yīng)由父級(jí) justify-content 統(tǒng)一控制
• 兩者都是“自我對(duì)齊”，優(yōu)先級(jí)高于父容器的 justify-items 或 align-items

基本上就這些。掌握這兩個(gè)屬性的重點(diǎn)是分清布局模式和軸方向。Grid 提供更精細(xì)的二維控制，而 Flexbox 更偏向一維流動(dòng)布局。align-self 更通用，justify-self 是 Grid 特有的橫向控制工具。不復(fù)雜但容易忽略細(xì)節(jié)。

以上就是css justify-self與align-self在子元素中使用的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！