CSS - justify-items 属性

CSS justify-items 属性用于沿内联方向（水平方向）对齐网格项目在其网格区域内的排列。它控制项目在其网格单元格内的放置方式，有效地设置它们在容器网格内的对齐方式。

语法

justify-items: legacy | normal | stretch | start | left | center | end | right |  overflow-alignment | baseline alignment | initial | inherit;

属性值

值	描述
legacy	此值由子盒继承。但是，如果子代具有 justify-self: auto，则只考虑 left、right 或 center 值，而不考虑 legacy 关键字。默认值。
normal	它取决于布局模式，对于网格布局，它与“stretch”相同。
stretch	如果未设置宽度，则它会拉伸以填充网格单元格。
start	它将项目沿内联方向对齐到对齐容器的起始边缘。
left	它将项目沿内联方向对齐到对齐容器的左边缘。
center	它将项目沿内联方向对齐到对齐容器的中心边缘。
end	它将项目沿内联方向对齐到对齐容器的结束边缘。
right	它将项目沿内联方向对齐到对齐容器的右边缘。
溢出对齐	safe：如果项目的尺寸超过对齐容器，则项目的对齐模式设置为“start”。 unsafe：无论项目和对齐容器的相对大小如何，都会遵守指定的对齐值。
基线对齐	元素与父元素的基线对齐。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

CSS Justify Items 属性示例

以下示例说明了具有不同值的justify-items 属性。

使用 Normal 值的 Justify Items 属性

要使用默认对齐行为（在大多数现代浏览器中通常对应于stretch）对齐项目，我们使用normal值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: normal;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: normal
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Stretch 值的 Justify Items 属性

要让网格项目拉伸以填充其网格单元格的整个宽度，我们使用stretch值。这是默认值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: stretch;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: stretch
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Start 值的 Justify Items 属性

要将网格项目对齐到其网格区域的起始边缘，我们使用start值。在从左到右 (LTR) 的语言中，这等效于 left；在从右到左 (RTL) 的语言中，它对齐到右边缘。direction 属性确定起始边缘。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: start;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }
      
      .first{
         direction: ltr;
      }
      .second{
         direction: rtl;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: start; direction: ltr;
   </h4>
   <div class="container first">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
   <h4>
      justify-items: start; direction: rtl;
   </h4>
   <div class="container second">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 End 值的 Justify Items 属性

要将网格项目对齐到其网格区域的结束边缘，我们使用end值。在 LTR 语言中，这等效于 right；在 RTL 语言中，它对齐到左边缘。direction 属性确定结束边缘。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: end;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .first {
         direction: ltr;
      }

      .second {
         direction: rtl;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: end; direction: ltr
   </h4>
   <div class="container first">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
   <h4>
      justify-items: end; direction: rtl
   </h4>
   <div class="container second">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Center 值的 Justify Items 属性

要将网格项目沿内联方向对齐到其网格区域的中心，我们使用center值。所有网格项目都在其网格单元格内水平居中对齐。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: center;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: center
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Left 值的 Justify Items 属性

要将网格项目沿内联方向对齐到其网格区域的左边缘，我们使用left值。所有网格项目都与其各自网格单元格的左侧齐平。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: left;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: left
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Right 值的 Justify Items 属性

要将网格项目沿内联方向对齐到其网格区域的右边缘，我们使用right值。所有网格项目都与其各自网格单元格的右侧齐平。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: right;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: right
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Baseline 值的 Justify Items 属性

要将网格项目沿网格单元格的基线对齐，我们使用baseline值。这对于使用特定基线对齐项目很有用。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: baseline;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: baseline
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Legacy Right 值的 Justify Items 属性

此值确保项目根据 CSS 网格规范完全标准化之前浏览器实现的行为对齐到其网格单元格的右边缘。它旨在提供与使用不同对齐系统的旧版浏览器行为的向后兼容性。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: legacy right;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: legacy right
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
justify-items	57.0	16.0	45.0	10.1	44.0

css_properties_reference.htm

打印页面