码农教程 - 一技在手,衣食无忧! tools

目录

CSS justify-self 属性

❮上一节 完整的CSS参考 下一节❯

示例

将网格项与其网格单元的右侧对齐：

.red {
  display: grid;
  justify-self: right;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个justify-self属性将网格项在其网格单元内沿内联方向对齐。

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

为了使此属性具有任何对齐效果，网格项需要在内联方向上其自身周围有可用空间。

提示：要在块方向而不是内联方向上对齐网格项，请使用align-self或者align-items特性。

展示演示❯

默认值： 汽车
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.justifySelf="right"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
justify-self 57.0 16.0 45.0 10.1 44.0

CSS 语法

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

属性值

Value Description Play it
auto Default value. Grid container justify-self property value is inherited. Demo ❯
normal Dependant on layout context, but similar to 'stretch' for grid layout for grid items when size is not set. If size is set, the property value behaves lik 'start'. Demo ❯
stretch Stretches to fill the grid cell if inline-size (width) is not set. Demo ❯
start Align items at the start in the inline direction Demo ❯
left Align items to the left Demo ❯
center Align items to the center Demo ❯
end Align items at the end in the inline direction Demo ❯
right Align items to the right Demo ❯
overflow-alignment
  • 'safe' sets alignment of the item to 'start' if the content overflows
  • 'unsafe' keeps the alignment value regardless of wether or not the item content overflows
baseline alignment The element is aligned with the baseline of the parent. Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

justify-self 与 justify-items

使用 justify-items 属性将容器的对齐方式设置为“居中”，并使用 justify-self 属性将网格项本身设置为“右”。属性值以“权利”为准：

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

.blue {
  justify-self: right;
}
亲自试一试 »

在绝对定位的网格项上证明自我

在绝对定位的网格项上对齐设置为“右”：

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

.red {
  position: absolute;
  justify-self: right;
}
亲自试一试 »

写作模式

随着writing-mode将网格容器元素的属性值设置为vertical-rl，内联方向为向下。结果是容器的开头从左侧移动到顶部，容器的结尾从右侧移动到底部：

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

.blue {
  justify-self: end;
}
亲自试一试 »

方向

随着direction网格容器元素的属性值设置为“rtl”，内联方向为从右到左。结果是容器的开头从左侧移动到右侧，容器的结尾从右侧移动到左侧：

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

.blue {
  justify-self: end;
}
亲自试一试 »

相关页面

CSS教程：CSS 网格

CSS教程：CSS定位

CSS 参考：对齐内容属性

CSS 参考：对齐项目属性

CSS 参考：自我对齐属性

CSS 参考：方向属性

CSS 参考：网格属性

CSS 参考：网格模板列属性

CSS 参考：位置属性

CSS 参考：写入模式属性


❮上一节 完整的CSS参考 下一节❯