1. 首页
  2. CSS 菜鸟教程
  3. CSS - justify-self 属性

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>
<< CSS - justify-items（对齐项目）属性 CSS - tab-size（制表符大小）属性 >>