CSS justify-items 属性通过为所有框设置默认 justify-self ，为每个框提供沿相关轴的默认对齐方式。
此属性的效果根据所使用的布局模式而有所不同:
它沿内联对齐块级布局中的项目其包含块内的轴。
当元素绝对定位时，包含块内的项目将在内联轴上对齐，考虑指定的顶部、左侧、底部和右侧偏移值。
此属性在表格单元格布局中被忽略。
此属性在 Flexbox 布局中被忽略。
在网格布局中的内联轴上对齐网格区域内的项目。
属性值
normal: 该关键字的效果取决于布局模式:
与块级布局中的 start 相同.
绝对定位使用此关键字作为替换框的"开始"和其他绝对定位框的"延伸"。
它在表格单元格布局中没有任何意义，因为它的属性被忽略。
它在 Flexbox 布局中没有任何意义，因为它的属性被忽略。
该术语充当网格项的"延伸"，但具有长宽比或固有尺寸的框除外，它们充当"开始"。
start: 将项目在相应轴的对齐容器的起始边缘对齐。
end: 将项目在相应的轴上对齐。相应轴中对齐容器的末端边缘。
center: 将项目对齐到对齐容器的中心。
flex-start: 该值被不是 Flex 容器子项的项目视为开始。
flex-end: 该值被视为结束，由不是弹性容器子项的项目。
self-start: 这些项目在适当的轴上与对齐容器的起始边缘对齐。
self-end: 项目在适当的轴上与对齐容器的结束边缘对齐。
left: 项目对齐到对齐容器的左边缘。如果属性的轴不平行于内联轴，则该值的作用类似于 start。
right: 项目在适当的轴上与对齐容器的右边缘对齐。如果属性的轴不平行于内联轴，则该值的作用类似于 start。
baseline,firstbaseline,lastbaseline: 定义与框的第一条或最后一条基线的对齐方式在其基线共享组中，将框的第一个或最后一个基线集与适当的基线对齐，开始作为第一个基线的后备，结束作为最后一个基线的后备。
拉伸: 当项目的总大小小于对齐容器时，自动调整大小的项目均匀放大，根据最大高度/最大宽度限制，组合尺寸填充对齐容器。
safe: 如果项目的大小溢出对齐容器，则项目的对齐模式设置为"start"。
unsafe -无论项目和对齐容器的相对大小如何，都会遵循指定的对齐值。
legacy: 该值由框后代继承。但是，如果后代具有 justify-self: auto，则仅考虑左值、右值或中心值，而不考虑旧关键字。
适用范围
所有元素。
语法
此属性可以采用四种形式中的任何一种:
基本关键字:关键字值为正常或拉伸。
基线对齐:带有附加第一个或最后一个的基线关键字。
位置对齐方式:选择居中、开始、结束、伸缩开始、伸缩结束、自开始、自结束、左对齐或右对齐。也可以选择不安全或安全。
旧版对齐:使用旧版关键字与 left 或 right。
基本关键字
justify-items: normal;
justify-items: stretch; 位置对齐
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; 基线对齐
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline; 溢出对齐（仅用于位置对齐）
justify-items: safe center;
justify-items: unsafe center; 旧版对齐
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center; CSS justify-items: normal
以下示例演示了 justify-items: normal 属性，该属性以其默认行为沿每个网格单元内的行轴对齐项目 -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: normal;
background-color: greenyellow;
}
.box > div {
width: 100px;
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS justify-items: stretch
以下示例演示了 justify-items:stretch 属性，该属性沿行轴拉伸项目以填充其列的整个宽度 -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: stretch;
background-color: greenyellow;
}
.box > div {
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS justify-items: start
以下示例演示了 justify-items: start 属性，该属性将项目与网格容器的起始边缘对齐 -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: start;
background-color: greenyellow;
}
.box > div {
width: 100px;
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS justify -items: end
以下示例演示了 justify-items: end 属性，该属性将项目与网格容器的结束边缘对齐 -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: end;
background-color: greenyellow;
}
.box > div {
width: 100px;
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS justify-items: center
以下示例演示 justify-items: center 属性。它将网格容器的中心水平对齐项目 -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: center;
background-color: greenyellow;
}
.box > div {
width: 100px;
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS justify-items: flex-start
以下示例演示了 justify-items: flex-start 属性将项目与网格容器的起始边缘对齐（与起始值相同） -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: flex-start;
background-color: greenyellow;
}
.box > div {
width: 100px;
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS justify-items: flex-end
以下示例演示了 justify- items:flex-end 属性，将项目与网格容器的结束边缘对齐（与最终值相同） -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: flex-end;
background-color: greenyellow;
}
.box > div {
width: 100px;
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS justify-items: self-start
The以下示例演示了 justify-items: self-start 属性，该属性在网格容器的起始边缘对齐项目 -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: self-start;
background-color: greenyellow;
}
.box > div {
width: 100px;
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS justify-items: self-end
以下内容示例演示了 justify-items: self-end 属性，该属性在网格容器的末端边缘对齐项目 -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: self-end;
background-color: greenyellow;
}
.box > div {
width: 100px;
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS justify-items: left
以下示例演示了justify-items: left 属性，将项目向网格容器的左边缘彼此对齐 -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: left;
background-color: greenyellow;
}
.box > div {
width: 100px;
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS justify-items: right
以下示例演示justify-items: right 属性，将项目朝网格容器的右边缘彼此对齐 -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: right;
background-color: greenyellow;
}
.box > div {
width: 100px;
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS justify-items: baseline
以下示例演示 justify-items:baseline 属性，该属性沿基线对齐项目。基线是一条假想的线，它将根据文本所在的位置对齐元素 -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: baseline;
background-color: greenyellow;
}
.box > div {
width: 100px;
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS justify-items: last baseline
以下示例演示了 justify-items :last baseline属性，沿着每行最后一个网格项目的基线对齐项目 -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: last baseline;
background-color: greenyellow;
}
.box > div {
width: 100px;
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS justify-items: safe center
以下示例演示了justify-items:safe center属性，将溢出项目（项目 1 和项目 3）与各自列的开头对齐 -
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 100px);
justify-items: safe center;
grid-gap: 10px;
border: 2px solid black;
padding: 10px;
background-color: greenyellow;
}
.grid-item {
width: 350px;
height: 50px;
background-color: lightcoral;
border: 2px solid blue;
margin: 5px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1 (Overflow)</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3 (Overflow)</div>
<div class="grid-item">Item 4</div>
</div>
</body>
</html> CSS justify-items: legacy right
以下示例演示了 justify-items:legacy right 属性，它将项目与网格单元格的末尾对齐 -
<html>
<head>
<style>
.box {
width: 100%;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
justify-items: legacy right;
background-color: greenyellow;
}
.box > div {
width: 100px;
border: 2px solid blue;
background-color: lightcoral;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>