CSS place-self 是一种速记属性，可同时在块方向和内联方向上对齐各个项目，类似于 align-self 和 justify-self 在 Grid 或 Flexbox 等布局系统中。如果未设置第二个值，则使用第一个值。
此属性是以下 CSS 属性的简写:
属性值
auto: 对齐基于父级的 align-self 值的项目。
normal− 基于布局模式，正常关键字更改的效果:
当布局绝对时，其行为类似于在替换的绝对定位框上开始，以及在所有其他绝对定位框上拉伸-positioned。
行为类似于绝对定位布局的静态位置中的拉伸。
行为类似于弹性项目的拉伸。
行为类似于网格项的拉伸，但具有长宽比或固有尺寸的框除外，其行为类似于开始。
不适用于块级框和表格单元格。
self-start−项目与横轴上项目起始侧对应的对齐容器的边缘对齐。
self-end: 项目与与横轴上项目的结束侧相对应的对齐容器。
flex-start: 将 Flex 项目的交叉起始边距边缘与十字对齐- 线的起始边缘。
flex-end− 将 Flex 项目的跨端边距边缘与线的跨端边缘对齐。
center− 弹性项目框的边距在横轴上的线内居中。当元素的横向尺寸大于容器时，内容会在两个方向上均匀溢出。
baseline, first baseline, last baseline −
第一个基线和最后一个基线与基线同义。 First 和 Last 指的是 Flex 项目中的行框。
这些值指定内容对齐中的第一个或最后一个基线对齐。
start 是第一个基线的后备对齐方式，end 是最后一个基线的后备对齐方式。
stretch: 当项目沿横轴的组合大小小于容器的大小，并且项目大小为自动时，其大小相等地增加，保持 max-height / max 的值-width。
适用范围
块级框、绝对定位框和网格项。
语法
关键字值
place-self: auto center;
place-self: normal start; 位置对齐
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal; 基线对齐
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto; CSS place-self: normal start
以下示例演示了 place-self:normal start 属性将项目 2 与其网格单元格的开头对齐 -
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: normal start;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS place-self: auto center
以下示例演示了 place-self: auto center 属性将项目 2 与其网格单元的中心对齐 -
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: auto center;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS place-self: center normal
以下示例演示了 place- self:center normal 属性将项目2在其网格单元的水平和垂直中心对齐 -
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: center normal;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS place-self: end normal
以下示例演示了place-self :end normal; 属性将其网格单元右边缘的项目 2 垂直和水平对齐到其网格单元的上边缘 -
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: end normal;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS place-self: start auto
以下示例演示了 place-self: start auto 属性将项目 2 与其网格单元格的开头对齐 -
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: start auto;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS place-self: self-start auto
以下示例演示了 place-self: self-start auto 属性将项目 2 垂直定位在行的开头，并在水平方向自动定位 -
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: self-start auto;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS place-self: self-end normal
以下示例演示了 place-self: self-end normal 属性将项目 2 垂直对齐到底部，水平对齐到其网格单元格的开头 -
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: self-end normal;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS place-self: flex-start auto
以下示例演示了 place-self:flex-start auto 属性将项目 2 垂直对齐到左边缘，水平对齐到其网格单元的顶部 -
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: flex-start auto;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS place-self: flex-end normal
以下示例演示了 place-self: flex-end normal; 属性将项目 2 与其网格单元的右边缘对齐 -
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: flex-end normal;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS place-self: baseline normal
以下示例演示了 place-self:baseline normal 属性将项目 2 与其网格单元的基线对齐 -
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: baseline normal;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS place-self: last baseline normal
以下示例演示了 place-self:last baseline normal 属性将项目 2 与其网格单元最后一行的基线对齐 -
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
height: 50px;
}
.item2 {
place-self: last baseline normal;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html> CSS place-self: stretch auto
以下示例演示了 place-self:stretch auto 属性水平拉伸项目 2 以填充其网格单元中的可用空间 -
<html>
<head>
<style>
.container {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
.container > div {
background-color: greenyellow;
border: 3px solid blue;
text-align: center;
margin: 5px;
width: 60px;
min-height: 50px;
}
.item2 {
place-self: stretch auto;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>