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

目录

CSS justify-items 属性

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

示例

将每个网格项沿内联方向对齐其网格单元的末尾：

#container {
  display: grid;
  justify-items: end;
}
亲自试一试 »

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

定义和用法

这个justify-items属性在网格容器上设置，以使子元素（网格项）沿内联方向对齐。

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

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

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

展示演示❯

默认值： 继承
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.justifyItems="center"尝试一下

浏览器支持

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

Property
justify-items 57.0 16.0 45.0 10.1 44.0

CSS 语法

justify-items: legacy|normal|stretch| positional alignment| overflow-alignment| baseline alignment|initial|inherit;

属性值

Value Description Play it
legacy Default value. Grid items with justify-self value 'auto' only inherits grid container justify-items property value if it starts with 'legacy'. It exists to implement the legacy alignment behavior of HTML's 〈center〉 element and align attribute. Demo ❯
normal Dependant on layout context, but similar to 'stretch' for grid layout 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-items 与 justify-self

对齐方式从容器设置为“居中”，在网格项本身设置为“右”。属性值以“权利”为准：

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

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

绝对定位的网格项目上的对齐项目

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

#container {
  display: grid;
  position: relative;
  justify-items: right;
}

.blue {
  position: absolute;
}
亲自试一试 »

写作模式

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

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}
亲自试一试 »

方向

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

#container {
  justify-items: start;
  direction: rtl;
}
亲自试一试 »

相关页面

CSS教程：CSS 网格

CSS教程：CSS定位

CSS 参考：对齐项目属性

CSS 参考：方向属性

CSS 参考：网格属性

CSS 参考：网格模板列属性

CSS 参考：证明自我属性

CSS 参考：位置属性

CSS 参考：写入模式属性


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