CSS justify-self 属性

定义和用法

justify-self 属性在其网格单元格内沿行内方向对齐网格项。

对于英文页面,行内方向是从左到右,块方向是向下。

如需使此属性具有任何对齐效果,网格项需要在行内方向上在自身周围留出可用空间。

提示:如需在块方向而不是行内方向对齐网格项,请使用 align-self 属性align-items 属性 属性。

另请参阅:

CSS 教程:CSS Grid

CSS 教程:CSS 定位

CSS 参考手册:align-content 属性

CSS 参考手册:align-items 属性

CSS 参考手册:align-self 属性

CSS 参考手册:direction 属性

CSS 参考手册:grid 属性

CSS 参考手册:grid-template-columns 属性

CSS 参考手册:position 属性

CSS 参考手册:writing-mode 属性

另请参阅:

实例

例子 1

在其网格单元的右侧对齐网格项:

.red {
  display: grid;
  justify-self: right;
}

亲自试一试

例子 2:justify-self 对比 justify-items

相对于容器的对齐方式设置为“居中”,网格项目本身设置为“右对齐”。属性值 'right' 占上风:

#container {
  display: grid;
  justify-items: center;
}

.blue {
  justify-self: right;
}

亲自试一试

例子 3:在绝对定位的网格项目上设置 justify-self

将绝对定位的网格项的对齐方式设置为 'right':

#container {
  display: grid;
  position: relative;
}

.red {
  position: absolute;
  justify-self: right;
}

亲自试一试

例子 4:writing-mode

当网格容器元素的 writing-mode 属性值设置为 vertical-rl 时,行内方向为向下。结果是容器的起点从左侧移到顶部,容器的末端从右侧移到底部:

#container {
  display: grid;
  writing-mode: vertical-rl;
}

.blue {
  justify-self: end;
}

亲自试一试

例子 5:direction

网格容器元素的 direction 属性值设置为“rtl”时,行内方向是从右到左。结果是容器的起点从左侧移到右侧,容器的末端从右侧移到左侧:

#container {
  display: grid;
  direction: rtl;
}

.blue {
  justify-self: end;
}

亲自试一试

CSS 语法

justify-self: auto|normal|stretch|positional alignment|overflow-alignment|baseline alignment|initial|inherit;

属性值

描述
auto 默认值。继承网格容器的 justify-self 属性值。
normal

取决于布局上下文,但类似于未设置 size 时网格项在网格布局中的 'stretch'。

如果设置了 size ,则属性值的行为类似于 'start'。

stretch 如果未设置 inline-size(宽度),则拉伸以填充网格单元格。
start 在行内方向的开头对齐项目。
left 将项目左对齐。
center 将项目对齐到中心。
end 在行内方向的末尾对齐项目。
right 将项目右对齐。
overflow-alignment
  • 'safe' 会将项目的对齐方式设置为 'start',如果内容溢出。
  • 'unsafe' 保持对齐值,无论项目内容是否溢出。
baseline alignment 元素与父元素的基线对齐。
initial 将此属性设置为其默认值。参阅 initial
inherit 从其父元素继承此属性。参阅 inherit

技术细节

默认值: auto
继承:
动画制作: 不支持。请参阅:动画相关属性
版本: CSS3
JavaScript 语法: object.style.justifySelf="right"

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0


http://www.vxiaotou.com