justify-items

Avatar of Mohit Khare
Mohit Khare

DigitalOcean 提供适合您旅程每个阶段的云产品。 立即开始使用 200 美元的免费积分!

justify-items 属性是 CSS 盒子对齐模块 的子属性,它主要控制网格项目在其范围内的对齐方式。

.element {
  justify-items: center;
}

justify-items 沿行(内联)轴对齐网格项目。 具体来说,此属性允许您设置网格容器(而不是网格本身)内项目的对齐方式,在特定位置(例如 startcenterend)或具有特定行为(例如 autostretch)。

当使用 justify-items 时,它还会为所有网格项目设置默认的 justify-self 值,尽管这可以通过在子级本身使用 justify-self 属性在子级级别覆盖。

.grid {
  display: grid;
  justify-items: center;
}

.grid-item {
  justify-self: start;
}

语法

justify-items: normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]
  • 初始值: legacy
  • 应用于:所有元素
  • 继承:
  • 计算值:如指定
  • 动画类型:离散

/* Basic keyword values */
justify-items: auto;
justify-items: normal;
justify-items: stretch;

/* Baseline alignment */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/* Positional alignment */
justify-items: center;
justify-items: start;
justify-items: end;
justify-items: flex-start;
justify-items: flex-end;
justify-items: self-start;
justify-items: self-end;
justify-items: left;
justify-items: right;

/* Overflow alignment */
/* Used as an optional second value for positional alignment */
justify-items: safe;
justify-items: unsafe;

/* Legacy */
justify-items: legacy center;
justify-items: legacy left;
justify-items: legacy right;

/* Global values */
justify-items: inherit;
justify-items: initial;
justify-items: unset;

基本关键字值

  • stretch: 默认值。 将项目对齐以填充整个网格项目单元格的宽度
  • auto: 与父元素中的 justify-items 值相同。
  • normal: 虽然我们看到 justify-items 最常用于网格布局,但它在技术上适用于任何盒子对齐,并且 normal 在不同的布局上下文中意味着不同的事物,包括
    • 块级布局 (start)
    • 网格布局 stretch
    • 弹性盒子 (忽略)
    • 表格单元格 (忽略)
    • 绝对定位布局 (start)
    • 绝对定位盒子 (stretch)
    • 替换的绝对定位盒子 (start)
.container {
  justify-items: stretch;
}

基线对齐值

这将盒子的第一个或最后一个基线集的对齐基线与与其对齐上下文相应的基线对齐。

.container {
  justify-items: <first | last> baseline;
}
  • first baseline 的回退对齐方式为 safe start
  • last baseline 的回退对齐方式为 safe end
  • baseline 单独使用时对应于 first baseline

在下面的演示中(最好在 Firefox 中查看),我们看到元素如何与网格基于主轴的对齐基线对齐。

位置对齐值

  • start: 将项目对齐到对齐容器的起始边缘
  • end: 将项目与对齐容器的结束边缘对齐
  • center: 将项目对齐到对齐容器的中心
  • left: 将项目对齐到对齐容器的左侧
  • right: 将项目对齐到对齐容器的右侧
  • self-start: 将项目对齐到每个网格项目单元格的起始位置
  • self-end: 将项目对齐到每个网格项目单元格的结束位置
.container {
  justify-items: <start | left | self-start>
}
.container {
  justify-items: <end | right | self-end>
}
.container {
  justify-items: center;
}

溢出对齐值

溢出 属性决定了当内容超出网格边界限制时它将如何显示网格内容。 因此,当内容大于对齐容器时,会导致溢出 这可能会导致数据丢失。 为了防止这种情况,我们可以使用 safe 值,它告诉浏览器更改对齐方式,以便不会丢失数据。

  • safe <left | right | center>: 如果项目溢出对齐容器,则使用 start 模式。
  • unsafe <left | right | center>: 对齐值保持不变,无论项目大小或对齐容器如何。

旧版值

  • legacy <right | left | center>: 当与方向关键字(例如 rightleftcenter)一起使用时,该关键字将传递给后代以继承。 但是,如果后代声明 justify-self: auto;legacy 将被忽略,但仍会尊重方向关键字。 如果未提供方向关键字,则该值将计算为继承值。 否则,它将计算为 normal

演示

更多信息

浏览器支持

浏览器支持 justify-items 由于它在多个布局上下文中使用,例如网格、弹性盒子、表格单元格,因此支持范围很广。 但一般来说,如果支持网格和弹性盒子,那么就可以假设 justify-items 也支持。

网格布局

IEEdgeFirefoxChromeSafariOpera
16+45+57+10.1+44+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
81+45+81+10.1+59+
来源:caniuse

弹性盒子布局

IEEdgeFirefoxChromeSafariOpera
12+20+52+9+12.1+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
87+83+81+9+12.1+
来源:caniuse