DigitalOcean 提供适合您旅程每个阶段的云产品。 立即开始使用 200 美元的免费积分!
justify-items
属性是 CSS 盒子对齐模块 的子属性,它主要控制网格项目在其范围内的对齐方式。
.element {
justify-items: center;
}
justify-items
沿行(内联)轴对齐网格项目。 具体来说,此属性允许您设置网格容器(而不是网格本身)内项目的对齐方式,在特定位置(例如 start
、center
和 end
)或具有特定行为(例如 auto
或 stretch
)。
当使用 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>
: 当与方向关键字(例如right
、left
或center
)一起使用时,该关键字将传递给后代以继承。 但是,如果后代声明justify-self: auto;
则legacy
将被忽略,但仍会尊重方向关键字。 如果未提供方向关键字,则该值将计算为继承值。 否则,它将计算为normal
。
演示
更多信息
浏览器支持
浏览器支持 justify-items
由于它在多个布局上下文中使用,例如网格、弹性盒子、表格单元格,因此支持范围很广。 但一般来说,如果支持网格和弹性盒子,那么就可以假设 justify-items
也支持。
网格布局
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 16+ | 45+ | 57+ | 10.1+ | 44+ |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
81+ | 45+ | 81+ | 10.1+ | 59+ |
弹性盒子布局
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 12+ | 20+ | 52+ | 9+ | 12.1+ |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
87+ | 83+ | 81+ | 9+ | 12.1+ |