CSS justify-self eigenschap
- 上一页 justify-items
- Volgende pagina @keyframes
Definition and Usage
The justify-self attribute aligns the grid item within the grid cell along the inline direction.
For English pages, the inline direction is from left to right, and the block direction is downward.
For this attribute to have any alignment effect, the grid item must leave available space around itself in the inline direction.
Tip:To align grid items in the block direction instead of the inline direction, use align-self attribute Or align-items attribute Properties.
See also:
CSS Tutorial:CSS Grid
CSS Tutorial:CSS Positioning
CSS Reference Manual:align-content attribute
CSS Reference Manual:align-items attribute
CSS Reference Manual:align-self attribute
CSS Reference Manual:direction attribute
CSS Reference Manual:grid attribute
CSS Reference Manual:grid-template-columns attribute
CSS Reference Manual:position attribute
CSS Reference Manual:writing-mode attribute
See also:
Instance
Example 1
Align the grid item to the right of its grid cell:
.red { display: grid; justify-self: right; }
Example 2: justify-self vs justify-items
Set the alignment relative to the container to 'center', and set the grid item itself to 'right'. The 'right' value prevails:
#container { display: grid; justify-items: center; } .blue { justify-self: right; }
Example 3: Set justify-self on an absolutely positioned grid item
Set the alignment of the absolutely positioned grid item to 'right':
#container { display: grid; position: relative; } .red { position: absolute; justify-self: right; }
Example 4: writing-mode
When the writing-mode attribute value of the grid container element is set to vertical-rl, the inline direction is downward. The result is that the container's starting point moves from the left to the top, and the container's end moves from the right to the bottom:
#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|位置对齐|overflow-alignment|基线对齐|initial|inherit;
属性值
值 | 描述 |
---|---|
auto | 默认值。继承网格容器的 justify-self 属性值。 |
normal |
取决于布局上下文,但类似于未设置 size 时网格项在网格布局中的 'stretch'。 如果设置了 size ,则属性值的行为类似于 'start'。 |
stretch | 如果未设置 inline-size(宽度),则拉伸以填充网格单元格。 |
start | 在行内方向的开头对齐项目。 |
left | 将项目左对齐。 |
center | 将项目对齐到中心。 |
end | 在行内方向的末尾对齐项目。 |
right | 将项目右对齐。 |
overflow-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 |
- 上一页 justify-items
- Volgende pagina @keyframes