CSS place-self 是一个简写属性，它同时在块和内联方向对齐各个项，类似于 Grid 或 Flexbox 等布局系统中的 align-self 和 justify-self 等属性。如果未设置第二个值，则使用第一个值。
此属性是以下 CSS 属性的简写：
可能的值
- auto - 根据父项的 align-self 值对齐项目。
- normal − 根据布局模式，normal 关键字的效果会发生变化：
- 当布局绝对定位时，其行为类似于从替换的绝对定位框start ，以及在所有其他绝对定位的框中拉伸。
- 行为类似于绝对定位布局的静态位置拉伸。
- 行为类似于弹性物品的拉伸。
- 其行为类似于网格项的拉伸，但具有纵横比或固有大小的框除外，其行为类似于开始。
- 不适用于块级框和表格单元格。
- self-start - 在十字轴中，项目与对齐容器的边缘对齐，该边缘对应于项目的起始侧。
- self-end− 在十字轴中，项目与对齐容器的边缘对齐，该对齐容器的边缘与项目的端侧相对应。
- flex-start − 将 flex 项的交叉起点边距边缘与线的交叉起点边缘对齐。
- flex-end - 将 flex 项的交叉端边距边缘与线的交叉端边缘对齐。
- center- 弹性项框的边距在横轴上的线内居中。当元素的十字大小时，内容会在两个方向上相等地溢出。
- baseline, first baseline, last baseline −
- 第一个基线和最后一个基线是基线的同义词。第一个和最后一个是指 flex 项中的行框。
- 这些值指定了第一基线对齐或最后基线对齐在内容对齐中的参与。
- “start ”是 first-baseline 的回退对齐，end 是 last-baseline 的回退对齐。
- stretch − 当项目与交叉轴的组合大小小于容器的大小，并且项目的大小为 auto 时，其大小相等增加，保持 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 - 正常开始值
以下示例演示了 place-self： normal start 属性将 Item 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 - 自动居中值
以下示例演示了 place-self： auto center 属性将 Item 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 - 居中法线值
以下示例演示了 place-self： center normal 属性在其网格单元格的水平和垂直中心对齐 Item 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 - 结束正常值
以下示例演示了 place-self： end normal 属性将 Item 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 - 启动自动值
以下示例演示了 place-self： start auto 属性将 Item 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 - 自启动自动值
以下示例演示了 place-self： self-start auto 属性将 Item 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 - 自结束正常值
以下示例演示了 place-self： self-end normal 属性将 Item 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 正常值
以下示例演示了 place-self： flex-end normal 属性将 Item 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 - 基线正常值
以下示例演示了 place-self： baseline normal 属性将 Item 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 - 最后基线正常值
以下示例演示了 place-self： last baseline normal 属性将 Item 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 - 拉伸自动值
以下示例演示了 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>
