CSS - justify-self 属性

CSS justify-self 属性通过为所有盒子项目设置默认的 justify-self 值，来提供每个盒子在相关轴上的默认对齐方式。

语法

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

属性值

值	描述
auto	它继承网格容器的 justify-items 属性值。默认值。
normal	它取决于布局模式，对于网格布局，它与“stretch”相同。
stretch	如果未设置宽度，它会拉伸以填充网格单元格。
start	它将项目与对齐容器的内联方向边缘的起始位置对齐。
left	它将项目与对齐容器的左边缘对齐。
center	它将项目与对齐容器的中心边缘对齐。
end	它将项目与对齐容器的内联方向边缘的结束位置对齐。
right	它将项目与对齐容器的右边缘对齐。
溢出对齐	safe：如果项目的大小超过对齐容器，则项目的对齐模式设置为“start”。 unsafe：无论项目和对齐容器的相对大小如何，都会遵守指定的对齐值。
基线对齐	元素与父元素的基线对齐。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

CSS Justify Self 属性示例

以下示例解释了使用不同值的justify-self 属性。

使用 Auto 值的 Justify Self 属性

要让网格项目根据网格容器的justify-items 属性指定的默认对齐方式进行对齐，我们使用auto 值。网格项目将使用为容器设置的对齐行为。在以下示例中，justify-items 已设置为“stretch”。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: auto;
      }
   </style>
</head>

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

</html>

使用 Normal 值的 Justify Self 属性

normal 值类似于auto 值，因为它通常对应于默认的对齐行为。它通常根据网格容器的默认设置对齐项目。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: normal;
      }
   </style>
</head>

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

</html>

使用 Stretch 值的 Justify Self 属性

要使网格项目拉伸以填充其网格单元格的整个宽度，我们使用stretch 值。它确保项目扩展以适应可用空间。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: stretch;
      }
   </style>
</head>

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

</html>

使用 Start 值的 Justify Self 属性

要将网格项目与网格单元格的起始边缘对齐，我们使用start 值。在从左到右 (LTR) 的语言中，这等效于向左对齐；在从右到左 (RTL) 的语言中，它向右对齐。direction 属性决定起始边缘。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

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

      .first-container {
         direction: ltr;
      }

      .second-container {
         direction: rtl;
      }

      .item {
         justify-self: start;
      }
   </style>
</head>

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

</html>

使用 End 值的 Justify Self 属性

将网格项目与网格单元格的结束边缘对齐，我们使用end 值。在从左到右 (LTR) 的语言中，这等效于向右对齐；在从右到左 (RTL) 的语言中，它向左对齐。direction 属性决定结束边缘。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

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

      .first-container {
         direction: ltr;
      }

      .second-container {
         direction: rtl;
      }

      .item {
         justify-self: end;
      }
   </style>
</head>

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

</html>

使用 Center 值的 Justify Self 属性

要将网格项目与网格单元格的中心对齐，我们使用center 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: center;
      }
   </style>
</head>

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

</html>

使用 Left 值的 Justify Self 属性

要将网格项目与网格单元格的左边缘对齐，我们使用left 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: left;
      }
   </style>
</head>

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

</html>

使用 Right 值的 Justify Self 属性

要将网格项目与网格单元格的右边缘对齐，我们使用right 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: right;
      }
   </style>
</head>

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

</html>

使用 Last Baseline 值的 Justify Self 属性

要将网格项目与其基线与网格单元格的最后一个基线对齐，我们使用last baseline 值。这对于对齐文本元素很有用，以便每个网格项目中的最后一行文本水平对齐。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: last baseline;
      }
   </style>
</head>

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

</html>

支持的浏览器

属性
justify-self	57.0	16.0	45.0	10.1	44.0

css_properties_reference.htm

打印页面