CSS 网格中的 justify-self、justify-items 和 justify-content 之间有什么区别？

Question

我真的很困惑。在查找在线资源和文档时，这些属性的大多数文档似乎都引用了 Flex-box，而不是网格。而且我不知道 Flex-box 中等效属性的文档对网格的适用性如何。

所以，我尝试引用 https://css-tricks.com/snippets/css/complete-guide-grid/，它定义它们如下：

justify-items - 沿行轴对齐网格项目内的内容

justify-content - 这属性沿行轴对齐网格

justify-self - 沿行轴对齐网格项内的内容

但是我还是不明白它们之间有什么区别。所以，我有3个问题想弄清楚。

Flex-box中的justify-items属性是否与 justify-items 属性在网格中？或者他们有什么不同？（换句话说，我可以为 Grid 重用 Flex-box 文档吗）
(justify-)content、self 和 items 有什么作用？
(justify-)content、self 和 items 有何不同？

任何澄清将不胜感激。

编辑： 因为每个人都一直给我 Flex-box 资源，我问的是 css-grid，不是 flex-box。

Answer 1

回答您的问题：

1

如 reallenramos 所述，"The justify-self and justify-items properties are not implemented in flexbox. This is due to the one-dimensional nature of flexbox, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the justify-content property." - MDN

2-3

这张来自 W3 的屏幕截图很好地展示了它们的作用以及它们之间的区别。

好消息：

有关更多信息和示例，我建议您查看：

为了一些灵感：

https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/

Answer 2

好吧，多亏了 Michael_B，我想我明白了。我的困惑来自于有时不同的属性不会随机改变网格布局的任何内容。

justify-content 允许您将网格放置在其网格容器内。这就是为什么如果网格容器与网格大小相同，则 justify-content 属性将不起作用。（如果您使用 fr 单位，情况总是如此）。这也是为什么它可以有值：space-around, space-between 和 space-evenly (除了 start, end, center 和 stretch)，这将分解网格并将网格项放置在网格容器中。这是 网格容器 的属性。

justify-items 允许您为放置在网格的网格项目中的内容设置默认位置（网格项目是网格中的一个框，定义在 Michael_B 的 post)。这是 网格容器 的属性。

justify-self 允许您覆盖单个单元格中内容的默认位置。这将覆盖由 justify-items 设置的位置。因此，如果您对容器的所有子项使用 justify-self，则在网格容器上设置 justify-items 将无效。这是网格项内 内容的属性。

注意：如果您将网格项设为网格本身（换句话说，网格项内的内容就是一个网格），那么您可以使用 justify-self 属性或内部网格的网格容器上的 justify-content 属性，因为内部网格的网格容器是外部网格的网格项目的内容之一。

如您所料，所有这些也适用于 align-* 属性。

如有不妥请指正

Answer 3

CSS 网格中 justify-content、justify-items 和 justify-self 之间的主要区别：

justify-content 属性控制网格列的对齐方式。它设置在 网格容器 上。它不适用于或控制网格项的对齐方式。
justify-items 属性控制网格项的对齐方式。它设置在 网格容器 .
justify-self 属性覆盖个别项目的 justify-items。它设置在 网格项 上，默认继承 justify-items 的值。

例子

这是一个 2x3 的网格。

2 列，每列 100 像素宽
3 行，每行 50 像素高

容器是：

500 像素宽
250 像素高

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

`justify-content`

justify-content 属性在容器内对齐列。

.container {
  justify-content: space-between;
}

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

justify-content: space-between 两列都固定在边缘。网格项目移动只是因为它们存在于这些列中。他们在其他方面不受影响。

请注意，此属性仅在容器中有空闲 space 时才有效。如果任何列的大小设置为 fr，那么所有可用的 space 都将被消耗，并且 justify-content 将无效。

`justify-items`

justify-items 属性将 网格项目 对齐到它们的轨道（不是整个容器）

.container {
  justify-items: center;
}

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

在 justify-items: center 中，网格项目在它们的列中居中。

`justify-self`

justify-self 属性覆盖单个项目的 justify-items。

.container        { justify-items: center;}
.box:nth-child(2) { justify-self: start; }
.box:nth-child(3) { justify-self: end; }
.box:nth-child(6) { justify-self: stretch; }


.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

`align-content`、`align-items` 和 `align-self`

这些属性与其 justify-* 对应物的作用相同，但在垂直方向上。

更多信息：

规格参考

10.3. Row-axis Alignment: the justify-self and justify-items properties

Grid items can be aligned in the inline dimension by using the justify-self property on the grid item or justify-items property on the grid container.

10.4. Column-axis Alignment: the align-self and align-items properties

Grid items can also be aligned in the block dimension (perpendicular to the inline dimension) by using the align-self property on the grid item or align-items property on the grid container.

10.5. Aligning the Grid: the justify-content and align-content properties

If the grid’s outer edges do not correspond to the grid container’s content edges (for example, if no columns are flex-sized), the grid tracks are aligned within the content box according to the justify-content and align-content properties on the grid container.

^{(emphasis added)}

CSS 框对齐模块

您写道：

Is the justify-items property in Flex-box the same as the justify-items property in Grid?

虽然 Flex 和 Grid 规范为关键字对齐属性提供了自己的定义，例如 justify-items 和 align-content，但 W3C 正在逐步淘汰各个盒子模型的对齐属性，并且实施他们的新 Box Alignment Module，旨在定义一组对齐属性以用于所有框模型。

来自 flexbox 规范：

1.2. Module interactions

The CSS Box Alignment Module extends and supercedes the definitions of the alignment properties (justify-content, align-items, align-self, align-content) introduced here.

Grid 规范中有类似的引用。

Answer 4

Justify-self 用于对齐内容在其单元格内的位置水平。

虽然 align-self 用于对齐内容在其单元格中的位置垂直。

这是使用 justify-self: start;

对齐项目的结果

代码的结果 justify-self: start;

Answer 5

justify-content用于当网格项的总大小小于网格容器时，将整个网格沿网格容器的row/inline轴定位。

justify-items 用于网格容器，用于通过为所有子框设置默认值 justify-self 属性来确定网格项目如何沿行展开。

justify-self 用于设置单个网格项如何沿 row/inline 轴定位自身。默认情况下，网格项继承容器上 justify-items 属性的值，因此如果设置 justify-self 值，它将覆盖继承的 justify-items 值。

来源：Codecademy CSS Grid cheatsheet

CSS 网格中的 justify-self、justify-items 和 justify-content 之间有什么区别？

What is difference between justify-self, justify-items and justify-content in CSS grid?

css

css-grid

回答您的问题：

好消息：

justify-content

justify-items