Css 简明教程

CSS - justify-items Property

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

此属性的效果根据所使用的布局模式而异：

  1. 它按照其容器块内的内联轴方向对齐块级布局中的项。

  2. 当元素被绝对定位时，容器块内的项在内联轴上对齐，考虑指定的顶部、左边、底部和右边偏移值。

  3. 此属性在表格单元格布局中被忽略。

  4. 此属性在弹性伸缩盒模型布局中被忽略。

  5. 在网格布局中，此属性使内联轴上的网格区域内项的对齐方式保持一致。

Possible Values

  1. normal - 此关键字的效果由布局模式决定：与块级布局中的开始相同。绝对定位使用此关键字作为替换方框的 'start' ，以及其他 absolute-positioned 方框的 'stretch' 。它在表格单元格布局中没有意义，因为它的属性被忽略。它在弹性伸缩盒模型布局中没有意义，因为它的属性被忽略。对于网格项而言，此术语用作 'stretch' ，具有宽高比或固有尺寸的方框除外，这些方框用作 'start' 。

  2. start - 使项沿着相应轴的对齐容器的起始边缘对齐。

  3. end - 使项沿着相应轴的对齐容器的结束边缘对齐。

  4. center - 使项沿着对齐容器的中心对齐。

  5. flex-start - 此值被非弹性伸缩盒容器的子项视为开始。

  6. flex-end − items 不是 flex 容器的子元素时，系统认为此值为 end。

  7. self-start − 将 items 在适用的轴中对齐到对齐容器的起始边缘。

  8. self-end − 将 items 在适用的轴中对齐到对齐容器的结束边缘。

  9. left − 将 items 对齐到对齐容器的左边缘。如果属性轴线不平行于内联轴线，此值的行为类似于 start 。

  10. right − 将 items 在适用的轴中对齐到对齐容器的右边缘。如果属性轴线不平行于内联轴线，此值的行为类似于 start 。

  11. baseline, first baseline, last baseline − 定义与同个基线共享群组框中的第一个或最后一个基线对齐，将框的第一个或最后一个基线集与合适的基线对齐，其中 start 作为第一个基线的替代项，而 end 作为最后一个基线的替代项。

  12. stretch − 当 items 的总大小小于对齐容器时，系统根据最大高度/最大宽度限制均匀地放大自动调整大小的 items，合并大小将填充对齐容器。

  13. safe − 如果 items 的大小超出对齐容器，则将 items 的对齐模式设置为 "start" 。

  14. unsafe − 无论 items 和对齐容器的相对大小如何，都会保留指定的对齐值。

  15. legacy − 框的后代继承此值。但是，如果后代具有 justify-self: auto ，则只考虑 left 、 right 或 centre 值，而不考虑 legacy 关键字。

Applies To

所有元素。

Syntax

此属性可以采用以下四种形式：

  1. Basic keyword: 关键字值为 normal 或 stretch。

  2. Baseline alignment: baseline 关键字加上 first 或 last。

  3. Positional alignment: 从 center、start、end、flex-start、flex-end、self-start、self-end、left 或 right 中选择。还可以选择 unsafe 或 safe。

  4. Legacy alignment: 使用带有 left 或 right 的旧版关键字。

Basic Keywords

justify-items: normal;
justify-items: stretch;

Positional Alignment

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;

Baseline Alignment

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

Overflow Alignment (for positional alignment only)

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

Legacy Alignment

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

CSS justify-items - normal Value

以下示例演示了 justify-items: normal 属性，它会沿着网格单元内的行轴对齐 items，并具有其默认行为 −

<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 - stretch Value

以下示例演示了 justify-items: stretch 属性，它会沿着行轴拉伸 items，以填充其所在列的整个宽度 −

<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 - start Value

以下示例演示了 justify-items: start 属性，它会将 items 对齐到网格容器的起始边缘 −

<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 - end Value

以下示例演示了 justify-items: end 属性，它会将 items 对齐到网格容器的结束边缘 −

<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 - center Value

以下示例演示了 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 - flex-start Value

以下示例演示了 justify-items: flex-start 属性，该属性将项目与网格容器的起始边对齐（与 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 - flex-end Value

以下示例演示了 justify-items: flex-end 属性，该属性将项目与网格容器的结束边对齐（与 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 - self-start Value

以下示例演示了 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 - self-end Value

以下示例演示了 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 - left Value

以下示例演示了 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 - right Value

以下示例演示了 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 - baseline Value

以下示例演示了 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 - last baseline Value

以下示例演示了 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 - safe center Value

以下示例演示了 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 - legacy right Value

以下示例演示了 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>