CSS - place-self 属性

上一页
下一页

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>
打印本页
上一页
下一页