CSS - justify-self 属性

上一页
下一页

CSS justify-self 属性通过为所有框项设置默认的 justify-self 来为每个框的相关轴提供默认对齐。

可能的值

auto − 该值基于父框的 justify-items 属性，除非该框缺少父框或绝对定位，其中它默认为“auto”表示正常。

normal − 此关键字的效果取决于布局模式：

  • 该关键字与块级布局中的 start 相同。
  • 在绝对定位中，关键字充当替换框的“开始”和其他绝对定位框的“延伸”。
  • 此关键字在表单元格布局中毫无意义，因为它的属性被忽略。
  • 此关键字在 flexbox 布局中毫无意义，因为它的属性被忽略了。
  • 对于网格项，此关键字的行为类似于拉伸，但具有纵横比或固有大小的框除外，在这些框中，它的功能类似于开始。

start − 在对齐容器的起始边缘对齐相应轴上的项目。

end − 将对齐容器的端边缘处的项目对齐到相应的轴上。

center − 将项目对齐对齐容器的中心。

flex-start − 此值被视为由不是 flex 容器的子项启动。

flex-end− 此值被不是 flex 容器的子项视为 end。

self-start − 项目在适当的轴上对齐到对齐容器的起始边缘。

self-end − 项目在适当的轴上对齐到对齐容器的端边缘。

left - 项目与对齐容器的左边缘对齐。如果属性的轴不平行于内联轴，则此值的作用类似于 start。

right − 项目在适当的轴上对齐到对齐容器的右边缘。如果属性的轴不平行于内联轴，则此值的作用类似于 start。

baseline, first baseline, last baseline - 定义与其基线共享组中框的第一个或最后一个基线的对齐方式，将框的第一个或最后一个基线集与相应的基线对齐，开始作为第一个基线的回退，结束作为最后一个基线。

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 - 自动值

以下示例演示了 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 - 正常值

以下示例演示了属性 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 - 拉伸值

以下示例演示了 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 - 启动值

以下示例演示了 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 - 最终值

以下示例演示了 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 - 自启动值

以下示例演示了 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 - 自我终结值

以下示例演示了 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 - 左值

以下示例演示了 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 - 正确的值

以下示例演示了 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 - 基线值

以下示例演示了 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 - 最后基线值

以下示例演示了 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>
打印本页
上一页
下一页