笙亿网络策划

CSS justify-items 属性怎么用？

约 20 分钟读完 2 阅
文章导读
上一个 测验 下一个 CSS justify-items 属性用于在行内方向（水平方向）上将 grid-items 对齐到其 grid area 中。它控制项目在 grid cell 中的放置方式，有效设置它们在容器 grid 中的对齐。
📋 目录
  1. 壹 语法
  2. 贰 属性值
  3. 叁 CSS Justify Items 属性的示例
  4. 肆 使用 Normal 值的 Justify Items 属性
  5. 伍 Justify Items 属性与 Stretch 值
  6. 陆 Justify Items 属性与 Start 值
  7. 柒 Justify Items 属性使用 end 值
  8. 捌 Justify Items 属性使用 center 值
  9. 玖 Justify Items 属性使用 left 值
  10. 拾 使用 right 值的 justify-items 属性
A A

CSS - justify-items 属性

上一个
测验
下一个

CSS justify-items 属性用于在行内方向（水平方向）上将 grid-items 对齐到其 grid area 中。它控制项目在 grid cell 中的放置方式，有效设置它们在容器 grid 中的对齐。

语法

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

属性值

值 描述
legacy 此值会被 box 后代继承。但是，如果后代有 justify-self: auto，则只会考虑 left、right 或 centre 值，而不会考虑 legacy 关键字。默认值。
normal 它依赖于布局模式，对于 grid 布局，它等同于 "stretch"。
stretch 如果未设置宽度，它会拉伸以填充 grid cell。
start 它将项目对齐到对齐容器的行内方向起始边缘。
left 它将项目对齐到对齐容器的左侧边缘。
center 它将项目对齐到对齐容器的中心边缘。
end 它将项目对齐到对齐容器的行内方向结束边缘。
right 它将项目对齐到对齐容器的右侧边缘。
overflow alignment
  • safe：如果项目大小溢出对齐容器，则将项目的对齐模式设置为 "start"。
  • unsafe：无论项目和对齐容器的大小关系如何，都会遵循指定的对齐值。
baseline alignment 元素与父元素的基线对齐。
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>

Justify Items 属性与 Stretch 值

为了让 grid item 拉伸填充其 grid cell 的整个宽度，我们使用 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>

Justify Items 属性与 Start 值

为了将 grid item 对齐到其 grid area 的起始边缘，我们使用 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>

Justify Items 属性使用 end 值

为了将 grid item 对齐到其 grid area 的结束边缘，我们使用 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>

Justify Items 属性使用 center 值

为了在 inline 方向将 grid item 对齐到其 grid area 的中心，我们使用 center 值。所有 grid item 在其 grid cell 内水平居中对齐。下面的示例展示了这一点。

示例

<!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>

Justify Items 属性使用 left 值

为了在 inline 方向将 grid item 对齐到其 grid area 的左边缘，我们使用 left 值。所有 grid item 紧贴各自 grid cell 的左侧定位。下面的示例展示了这一点。

示例

<!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 属性

为了将 grid item 在 inline 方向对齐到其 grid area 的右边缘，我们使用 right 值。所有 grid item 都会紧贴各自 grid cell 的右侧定位。如以下示例所示。

示例

<!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 属性

为了将 grid item 沿 grid cell 的 baseline 对齐，我们使用 baseline 值。这对于对齐具有特定 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 Grid 规范完全标准化之前浏览器实现的旧行为，对齐到其 grid cell 的右边缘。它旨在为使用不同对齐系统的旧浏览器行为提供向后兼容。如以下示例所示。

示例

<!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>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
justify-items 57.0 16.0 45.0 10.1 44.0
css_reference.htm