CSS justify-self 属性通过为所有框项设置默认的 justify-self，为每个框提供沿相关轴的默认对齐方式。
属性值
auto: 该值基于父框的 justify-items 属性，除非该框缺少父框或者是绝对定位，默认为表示正常的"auto"。
normal: 该关键字的效果取决于布局模式:
关键字与块级布局中的 start 相同。
在绝对定位中，关键字充当替换框的"开始"，其他绝对定位框的"拉伸"。
此关键字在表格单元格布局中没有意义，因为它的属性被忽略。
此关键字在 Flexbox 布局中毫无意义，因为它的属性被忽略。
对于网格项，此关键字表现为拉伸，但具有长宽比或内在的框除外大小，其功能类似于开始。
start: 将项目对齐相应轴中对齐容器的起始边缘。
end: 将项目在相应轴的对齐容器的末端边缘对齐。
center: 对齐项目位于对齐容器的中心。
flex-start: 该值被视为非 Flex 容器子项的开始。
flex-end: 该值被视为非 Flex 容器子项的结束。
self-start: 项目对齐到适当轴上对齐容器的起始边缘。
self-end: 项目与适当轴上对齐容器的结束边缘对齐。
left: 项目与对齐容器的左边缘对齐。如果属性的轴不平行于内联轴，则该值的作用类似于 start。
right: 项目在适当的轴上与对齐容器的右边缘对齐。如果属性的轴不平行于内联轴，则该值的作用类似于 start。
baseline,firstbaseline,lastbaseline: 定义与框的第一条或最后一条基线的对齐方式在其基线共享组中，将框的第一个或最后一个基线集与适当的基线对齐，开始作为第一个基线的后备，结束作为最后一个基线的后备。
stretch: 当项目的总大小小于对齐容器时，自动调整大小的项目均匀放大，根据最大高度/最大宽度限制，组合尺寸填充对齐容器。
safe: 如果项目的大小溢出对齐容器，则将项目对齐，就像启动对齐模式一样。
unsafe: 无论如何，都会遵循指定的对齐值项目和对齐容器的相对大小。
适用范围
块级框、绝对定位框和网格项。
语法
基本关键字
justify-self: auto;
justify-self: normal;
justify-self: stretch; 位置对齐
justify-self: center;
justify-self: start;
justify-self: end;
justify-self: flex-start;
justify-self: flex-end;
justify-self: self-start;
justify-self: self-end;
justify-self: left;
justify-self: right; 基线对齐
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline; 溢出对齐（用于位置对齐）
justify-self: safe center;
justify-self: unsafe center; CSS justify-self: auto
以下示例演示 justify-self: auto 属性采用其网格单元的整个宽度 -
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
width: 90%;
}
.item {
background-color: lightgray;
}
.item2 {
background-color: violet;
justify-self: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: auto</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html> CSS justify-self: normal
以下示例演示属性 justify-self:normal将 item2 与网格单元的左边缘对齐 -
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: normal;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: normal</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html> CSS justify-self: stretch
以下示例演示了 justify-self:stretch属性拉伸项目以填充网格单元的整个宽度:
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
width: 90%;
}
.item {
background-color: lightgray;
}
.item2 {
background-color: violet;
justify-self: stretch;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: stretch</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html> CSS justify-self: start
以下示例演示 justify-self: start 属性将第二个项目与网格单元的开头（左侧）对齐 -
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: start;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: start</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html> CSS justify-self: end
以下示例演示了 justify-self: end 属性将第二个项目与网格单元的末尾（右侧）对齐 -
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: end;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: end</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html> CSS justify-self: center
下面的例子演示了 justify-self: center 属性将第二个项目对齐到网格单元的中心 -
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: center</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html> CSS justify-self: flex-start
以下示例演示了 justify-self:flex-start 属性将第二个项目与网格单元格的开头对齐 -
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: flex-start;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: flex-start</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html> CSS justify-self: flex-end
以下示例演示 justify-self:flex-end 属性将第二个项目与网格单元的末尾对齐 -
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: flex-end;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: flex-end</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html> CSS justify-self: self-start
以下示例演示justify-self: self-start 属性将第二个项目与网格单元的起始边缘对齐 -
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: self-start;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: self-start</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html> CSS justify-self: self-end
以下示例演示justify-self: self-end 属性将第二个项目与网格单元的结束边缘对齐 -
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: self-end;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: self-end</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html> CSS justify-self: left
以下示例演示了 justify -self: left 属性将第二个项目与网格单元的左边缘对齐 -
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: left;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: left</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html> CSS justify-self: right
以下示例演示 justify-self: right属性将第二个项目与网格单元格的右边缘对齐 -
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: right;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: right</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html> CSS justify-self: baseline
以下示例演示了 justify-self:baseline属性对齐第二个项目沿着网格单元基线的项目。基线是一条假想的线，它将根据文本所在的位置对齐元素 -
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: baseline;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: baseline</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html> CSS justify-self: last baseline
以下示例演示了 justify-self :last baseline属性将第二个项目沿着网格单元的最后一个基线对齐 -
<html>
<head>
<style>
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
padding: 10px;
background-color: greenyellow;
}
.container > div {
border: 2px solid black;
padding: 5px;
text-align: center;
}
.item {
background-color: lightgray;
width: 90%;
}
.item2 {
background-color: violet;
width: 60%;
justify-self: last baseline;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item2">justify-self: last baseline</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>