CSS - justify-items（对齐项目）属性_CSS 菜鸟教程

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

此属性的效果因使用的布局模式而异：

它在其包含块内沿内联轴对齐块级布局中的项。
当元素绝对定位时，包含块中的项将考虑指定的顶部、左侧、底部和右侧偏移值，在内联轴上对齐。
此属性在表单元格布局中被忽略。
在 Flexbox 布局中，此属性将被忽略。
在网格布局中对齐内联轴上的网格区域内的项。

可能的值

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

与块级布局中的 start 相同。
绝对定位使用此关键字作为替换框的“start”和其他绝对定位的“stretch”。
它在表单元格布局中没有意义，因为它的属性被忽略了。
它在 flexbox 布局中没有意义，因为它的属性被忽略了。
该术语充当网格项的“stretch”，但具有纵横比或固有尺寸的框除外，它们充当“start”。

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

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

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

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

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

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

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

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

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

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

stretch − 当项目的聚合大小小于对齐容器时，自动调整大小的项目会均匀放大，根据最大高度/最大宽度限制，组合大小将填充对齐容器。

safe − 如果项目的大小溢出对齐容器，则项目的对齐模式设置为“start”。

unsafe − 无论项目和对齐容器的相对大小如何，都遵循指定的对齐值。

legacy - 此值由框后代继承。但是，如果后代具有 justify-self： auto，则仅考虑 left、right 或 center 值，而不考虑 legacy 关键字。

适用于

所有元素。

语法

此属性可以采用以下四种形式中的任何一种：

基本关键词：关键字值为 normal 或 stretch。
基线对齐：带有附加的第一个或最后一个的 baseline 关键字。
位置对准：从中心、开始、结束、弹性启动、弹性结束、自启动、自端、左或右选择。也可以选择不安全或安全。
传统对齐方式：将 legacy 关键字与 left 或 right 一起使用。

基本关键字

justify-items: normal;

justify-items: stretch;

位置对准

justify-items: center;
justify-items: start;	
justify-items: end;	
justify-items: flex-start;
justify-items: flex-end;	
justify-items: self-start;
justify-items: self-end;
justify-items: left;	
justify-items: right;

基线对齐

justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

溢出对齐（仅适用于位置对齐）

justify-items: safe center;
justify-items: unsafe center;

传统对齐方式

justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

CSS justify-items - 正常值

以下示例演示了 justify-items： normal 属性，该属性沿每个网格单元内的行轴对齐项目，使其具有默认行为 -

<html>
<head>
<style>	
	 	.box {
	 	 	 width: 100%;
	 	 	 border: 2px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: 1fr 1fr;
	 	 	 grid-auto-rows: 40px;
	 	 	 grid-gap: 10px;
	 	 	 justify-items: normal;
	 	 	 background-color: greenyellow;
	 	}
	 	.box > div {
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 background-color: lightcoral;
	 	 	 margin: 5px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div>Item 1</div>
	 	 	 <div>Item 2</div> 	
	 	 	 <div>Item 3</div>
	 	 	 <div>Item 4</div>
	 	</div>
</body>
</html>

CSS justify-items - 拉伸值

以下示例演示了 justify-items： stretch 属性，该属性沿行轴拉伸项以填充其列的整个宽度 -

<html>
<head>
<style>	
	 	.box {
	 	 	 width: 100%;
	 	 	 border: 2px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: 1fr 1fr;
	 	 	 grid-auto-rows: 40px;
	 	 	 grid-gap: 10px;
	 	 	 justify-items: stretch;
	 	 	 background-color: greenyellow;
	 	}
	 	.box > div {
	 	 	 border: 2px solid blue;
	 	 	 background-color: lightcoral;
	 	 	 margin: 5px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div>Item 1</div>
	 	 	 <div>Item 2</div> 	
	 	 	 <div>Item 3</div>
	 	 	 <div>Item 4</div>
	 	</div>
</body>
</html>

CSS justify-items - 起始值

以下示例演示了 justify-items： start 属性，该属性将项与网格容器的起始边缘对齐 -

<html>
<head>
<style>	
	 	.box {
	 	 	 width: 100%;
	 	 	 border: 2px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: 1fr 1fr;
	 	 	 grid-auto-rows: 40px;
	 	 	 grid-gap: 10px;
	 	 	 justify-items: start;
	 	 	 background-color: greenyellow;
	 	}
	 	.box > div {
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 background-color: lightcoral;
	 	 	 margin: 5px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div>Item 1</div>
	 	 	 <div>Item 2</div> 	
	 	 	 <div>Item 3</div>
	 	 	 <div>Item 4</div>
	 	</div>
</body>
</html>

CSS justify-items - 结束值

以下示例演示了 justify-items： end 属性，该属性将项与网格容器的结束边缘对齐 -

<html>
<head>
<style>	
	 	.box {
	 	 	 width: 100%;
	 	 	 border: 2px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: 1fr 1fr;
	 	 	 grid-auto-rows: 40px;
	 	 	 grid-gap: 10px;
	 	 	 justify-items: end;
	 	 	 background-color: greenyellow;
	 	}
	 	.box > div {
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 background-color: lightcoral;
	 	 	 margin: 5px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div>Item 1</div>
	 	 	 <div>Item 2</div> 	
	 	 	 <div>Item 3</div>
	 	 	 <div>Item 4</div>
	 	</div>
</body>
</html>

CSS justify-items - 中心值

以下示例演示 justify-items： center 属性。它使网格容器中心的项水平对齐 -

<html>
<head>
<style>	
	 	.box {
	 	 	 width: 100%;
	 	 	 border: 2px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: 1fr 1fr;
	 	 	 grid-auto-rows: 40px;
	 	 	 grid-gap: 10px;
	 	 	 justify-items: center;
	 	 	 background-color: greenyellow;
	 	}
	 	.box > div {
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 background-color: lightcoral;
	 	 	 margin: 5px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div>Item 1</div>
	 	 	 <div>Item 2</div> 	
	 	 	 <div>Item 3</div>
	 	 	 <div>Item 4</div>
	 	</div>
</body>
</html>

CSS justify-items - 弹性启动值

以下示例演示了 justify-items： flex-start 属性，该属性将项目对准网格容器的起始边缘（与起始值相同） -

<html>
<head>
<style>	
	 	.box {
	 	 	 width: 100%;
	 	 	 border: 2px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: 1fr 1fr;
	 	 	 grid-auto-rows: 40px;
	 	 	 grid-gap: 10px;
	 	 	 justify-items: flex-start;
	 	 	 background-color: greenyellow;
	 	}
	 	.box > div {
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 background-color: lightcoral;
	 	 	 margin: 5px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div>Item 1</div>
	 	 	 <div>Item 2</div> 	
	 	 	 <div>Item 3</div>
	 	 	 <div>Item 4</div>
	 	</div>
</body>
</html>

CSS justify-items - 弹性端值

以下示例演示了 justify-items： flex-end 属性，该属性将项与网格容器的结束边缘对齐（与结束值相同） -

<html> <head> <style> .box { width: 100%; border: 2px solid black; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; justify-items: flex-end; background-color: greenyellow; } .box > div { width: 100px; border: 2px solid blue; background-color: lightcoral; margin: 5px; text-align: center; } </style> </head> <body> <div class="box"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> </body> </html>

CSS justify-items - 自启动值

以下示例演示了 justify-items： self-start 属性，该属性将项对齐在网格容器的起始边缘 -

<html>
<head>
<style>	
	 	.box {
	 	 	 width: 100%;
	 	 	 border: 2px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: 1fr 1fr;
	 	 	 grid-auto-rows: 40px;
	 	 	 grid-gap: 10px;
	 	 	 justify-items: self-start;
	 	 	 background-color: greenyellow;
	 	}
	 	.box > div {
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 background-color: lightcoral;
	 	 	 margin: 5px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div>Item 1</div>
	 	 	 <div>Item 2</div> 	
	 	 	 <div>Item 3</div>
	 	 	 <div>Item 4</div>
	 	</div>
</body>
</html>

CSS justify-items - 自端值

以下示例演示了 justify-items： self-end 属性，该属性将项对齐在网格容器的结束边缘 -

<html>
<head>
<style>	
	 	.box {
	 	 	 width: 100%;
	 	 	 border: 2px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: 1fr 1fr;
	 	 	 grid-auto-rows: 40px;
	 	 	 grid-gap: 10px;
	 	 	 justify-items: self-end;
	 	 	 background-color: greenyellow;
	 	}
	 	.box > div {
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 background-color: lightcoral;
	 	 	 margin: 5px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div>Item 1</div>
	 	 	 <div>Item 2</div> 	
	 	 	 <div>Item 3</div>
	 	 	 <div>Item 4</div>
	 	</div>
</body>
</html>

CSS justify-items - 左值

以下示例演示了 justify-items： left 属性，该属性将项目彼此齐平，朝向网格容器的左边缘 -

<html>
<head>
<style>	
	 	.box {
	 	 	 width: 100%;
	 	 	 border: 2px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: 1fr 1fr;
	 	 	 grid-auto-rows: 40px;
	 	 	 grid-gap: 10px;
	 	 	 justify-items: left;
	 	 	 background-color: greenyellow;
	 	}
	 	.box > div {
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 background-color: lightcoral;
	 	 	 margin: 5px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div>Item 1</div>
	 	 	 <div>Item 2</div> 	
	 	 	 <div>Item 3</div>
	 	 	 <div>Item 4</div>
	 	</div>
</body>
</html>

CSS justify-items - 正确的值

以下示例演示了 justify-items： right 属性，该属性将项目彼此齐平，朝向网格容器的右边缘 -

<html>
<head>
<style>	
	 	.box {
	 	 	 width: 100%;
	 	 	 border: 2px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: 1fr 1fr;
	 	 	 grid-auto-rows: 40px;
	 	 	 grid-gap: 10px;
	 	 	 justify-items: right;
	 	 	 background-color: greenyellow;
	 	}
	 	.box > div {
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 background-color: lightcoral;
	 	 	 margin: 5px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div>Item 1</div>
	 	 	 <div>Item 2</div> 	
	 	 	 <div>Item 3</div>
	 	 	 <div>Item 4</div>
	 	</div>
</body>
</html>

CSS justify-items - 基线值

以下示例演示 justify-items： baseline 属性，该属性沿基线对齐项。基线是一条假想线，它将根据元素的文本位置对齐元素 -

<html>
<head>
<style>	
	 	.box {
	 	 	 width: 100%;
	 	 	 border: 2px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: 1fr 1fr;
	 	 	 grid-auto-rows: 40px;
	 	 	 grid-gap: 10px;
	 	 	 justify-items: baseline;
	 	 	 background-color: greenyellow;
	 	}
	 	.box > div {
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 background-color: lightcoral;
	 	 	 margin: 5px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div>Item 1</div>
	 	 	 <div>Item 2</div> 	
	 	 	 <div>Item 3</div>
	 	 	 <div>Item 4</div>
	 	</div>
</body>
</html>

CSS justify-items - 最后基线值

以下示例演示了 justify-items： last baseline 属性，该属性使项目沿着每行中最后一个网格项的基线对齐 -

<html>
<head>
<style>	
	 	.box {
	 	 	 width: 100%;
	 	 	 border: 2px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: 1fr 1fr;
	 	 	 grid-auto-rows: 40px;
	 	 	 grid-gap: 10px;
	 	 	 justify-items: last baseline;
	 	 	 background-color: greenyellow;
	 	}
	 	.box > div {
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 background-color: lightcoral;
	 	 	 margin: 5px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div>Item 1</div>
	 	 	 <div>Item 2</div> 	
	 	 	 <div>Item 3</div>
	 	 	 <div>Item 4</div>
	 	</div>
</body>
</html>

CSS justify-items - 安全中心值

以下示例演示了 justify-items： safe center 属性，该属性将溢出的项目（项目 1 和项目 3）与其各自列的开头对齐 -

<html>
<head>
<style>
	 	.grid-container {
	 	 	 display: grid;
	 	 	 grid-template-columns: repeat(2, 100px);
	 	 	 justify-items: safe center;
	 	 	 grid-gap: 10px;
	 	 	 border: 2px solid black;
	 	 	 padding: 10px;
	 	 	 background-color: greenyellow;
	 	}
	 	.grid-item {
	 	 	 width: 350px;	
	 	 	 height: 50px;
	 	 	 background-color: lightcoral;
	 	 	 border: 2px solid blue;
	 	 	 margin: 5px;
	 	}
</style>
</head>
<body>
	 	<div class="grid-container">
	 	 	 <div class="grid-item">Item 1 (Overflow)</div>
	 	 	 <div class="grid-item">Item 2</div>
	 	 	 <div class="grid-item">Item 3 (Overflow)</div>
	 	 	 <div class="grid-item">Item 4</div>
	 	</div>
</body>
</html>

CSS justify-items - 遗留权利值

以下示例演示了 justify-items： legacy right 属性，该属性将项与网格单元格的末尾对齐 -

<html>
<head>
<style>	
	 	.box {
	 	 	 width: 100%;
	 	 	 border: 2px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: 1fr 1fr;
	 	 	 grid-auto-rows: 40px;
	 	 	 grid-gap: 10px;
	 	 	 justify-items: legacy right;
	 	 	 background-color: greenyellow;
	 	}
	 	.box > div {
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 background-color: lightcoral;
	 	 	 margin: 5px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div>Item 1</div>
	 	 	 <div>Item 2</div> 	
	 	 	 <div>Item 3</div>
	 	 	 <div>Item 4</div>
	 	</div>
</body>
</html>

<< CSS - overscroll-behavior （滚动）属性 CSS - justify-self 属性 >>