Css 简明教程

CSS - justify-items Property

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

CSS justify-items property provides a default alignment along the relevant axis for each box by setting the default justify-self for all box items.

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

This property’s effect varies based on the layout mode in use:

  1. It aligns items in block-level layouts along the inline axis within their containing block.

  2. When elements are positioned absolutely, the items within the containing block are aligned on the inline axis, considering the specified top, left, bottom, and right offset values.

  3. This property is ignored in table cell layouts .

  4. This property is ignored in Flexbox layouts.

  5. Aligns the items inside the grid areas on the inline axis in grid layouts.

Possible Values

  1. normal − This keyword’s effect is determined on the layout mode: Same as start in block-level layouts. Absolute positioning uses this keyword as a 'start' for replaced boxes and a 'stretch' for other absolute-positioned boxes. It has no meaning in table cell layouts because its property is ignored. It has no meaning in flexbox layouts because its property is ignored. This term acts as a 'stretch' for grid items, except boxes with an aspect ratio or intrinsic sizes, which act as a 'start'.

  2. start − Aligns the items at the start edge of the alignment container in the corresponding axis.

  3. end − Aligns the items at the end edge of the alignment container in the corresponding axis.

  4. center − Aligns the items at the centre of the alignment container.

  5. flex-start − This value is considered as start, by items that are not children of a flex container.

  6. flex-end − This value is considered as end, by items that are not children of a flex container.

  7. self-start − The items are aligned to the start edge of the alignment container in the appropriate axis.

  8. self-end − The items are aligned to the end edge of the alignment container in the appropriate axis.

  9. left − The items are aligned to the left edge of the alignment container. This value acts like start if the property’s axis is not parallel to the inline axis.

  10. right − The items are aligned to the right edge of the alignment container in the appropriate axis. This value acts like start if the property’s axis is not parallel to the inline axis.

  11. baseline, first baseline, last baseline − Defines alignment with the first or last baseline of a box in its baseline-sharing group, aligns the box’s first or last baseline set with the appropriate baseline, with start as the fallback for the first baseline and end for the last baseline.

  12. stretch − When the aggregate size of the items is less than the alignment container, auto-sized items are evenly enlarged, according to max-height/max-width limitations, the combined size fills the alignment container.

  13. safe − In case the size of the item overflows the alignment container, the alignment mode of the item is set as "start".

  14. unsafe − The specified alignment value is honored regardless of the relative sizes of the item and alignment container.

  15. legacy − This value is inherited by box descendants. However, if a descendant has justify-self: auto, only left, right, or centre values are considered, not the legacy keyword.

Applies To

所有元素。

All elements.

Syntax

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

This property can take any of four forms:

  1. Basic keyword: The keyword values are normal or stretch.

  2. Baseline alignment: The baseline keyword with an additional first or last.

  3. Positional alignment: Choose from center, start, end, flex-start, flex-end, self-start, self-end, left, or right. also optionally unsafe or safe.

  4. Legacy alignment: Use the legacy keyword with left or 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，并具有其默认行为 −

The following example demonstrates the justify-items: normal property that aligns the items along the row axis within each grid cell with its default behavior −

<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，以填充其所在列的整个宽度 −

The following example demonstrates the justify-items: stretch property that stretches the items along the row axis to fill the entire width of their columns −

<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 对齐到网格容器的起始边缘 −

The following example demonstrates the justify-items: start property that aligns items against the start edge of the grid container −

<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 对齐到网格容器的结束边缘 −

The following example demonstrates the justify-items: end property that aligns items against the end edge of the grid container −

<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 属性。它将网格容器中的项目在水平方向上居中对齐 −

The following example demonstrates the justify-items: center property. It aligns the items at the center of the grid container horizontally −

<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 值相同）−

The following example demonstrates the justify-items: flex-start property that aligns items against the start edge of the grid container (same as the start value) −

<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 值相同）−

The following example demonstrates the justify-items: flex-end property that aligns items against the end edge of the grid container (same as the end value) −

<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 属性，该属性将项目与网格容器的开始边对齐 −

The following example demonstrates the justify-items: self-start property that aligns items at the start edge of the grid container −

<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 属性，该属性将项目与网格容器的结束边对齐 −

The following example demonstrates the justify-items: self-end property that aligns items at the end edge of the grid container −

<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 属性，该属性使项目相互紧贴并向网格容器的左侧边缘对齐 −

The following example demonstrates the justify-items: left property, that packed flush the items with each other towards the left edge of the grid container −

<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 属性，该属性使项目相互紧贴并向网格容器的右侧边缘对齐 −

The following example demonstrates the justify-items: right property, that packed flush the items with each other towards the right edge of the grid container −

<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 属性，该属性使项目沿着基线对齐。基线是一条假想线，它将根据文本所在位置来对齐元素 −

The following example demonstrates the justify-items: baseline property, that aligns the items along the basline. The baseline is an imaginary line that will align the elements based on where their text is located −

<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 属性，该属性使项目沿着每行的最后一个网格项目的基线对齐 −

The following example demonstrates the justify-items: last baseline property, that aligns the items along the baseline of the last grid item in each row −

<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）对齐到它们各自列的开始位置 −

The following example demonstrates the justify-items: safe center property, that aligns the overflowing items ( Item 1 and Item 3) to the start of their respective columns −

<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 属性，该属性将项目对齐到网格单元的结束位置 −

The following example demonstrates the justify-items: legacy right property, that aligns the items to the end of the grid cells −

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