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 个问题要澄清。

1. Flex-box 中的 justify-items justify-items 是否与 Grid 中的 — 属性相同？或者它们有什么不同？ （换句话说，我可以为 Grid 重用 Flex-box 文档吗）
2. (justify-)content、self 和 items 做什么？
3. （证明-）内容、自我和项目有何不同？

任何澄清将不胜感激。

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

原文由 keithlee96 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要回答您的问题：

1

正如 reiallenramos 所提到的，“justify-self 和 justify-items 属性没有在 flexbox 中实现。这是由于 flexbox 的一维性质，并且沿轴可能有多个项目，因此无法证明单个项目。要沿 flexbox 中的主内联轴对齐项目，请使用 justify-content 属性。 -MDN

2-3

W3 的这个屏幕截图很好地展示了它们的功能以及它们之间的差异。

很高兴知道：

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

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
• https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
• https://www.smashingmagazine.com/2017/12/grid-inspector/

并获得一些灵感：

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

原文由 L Bahr 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

---

例子

这是一个 2x3 的网格。

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

容器是：

• 500px 宽
• 250px 高

 .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 两列都固定在边缘。网格项目移动只是因为它们存在于这些列中。他们不受影响。

请注意，此属性仅在容器中有可用空间时才有效。如果任何列的大小为 fr ，那么所有可用空间都将被消耗，并且 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.行轴对齐： justify-self 和 justify-items 属性

通过使用 网格 项上的 justify-items 属性或网格容器上的 --- 属性，可以 justify-self 联维度中对齐网格项。

10.4.列轴对齐： align-self 和 align-items 属性

通过使用网格项上的 align-items align-self 或网格容器上的 --- 属性， 网格项 也可以在块维度（垂直于内联维度）中对齐。

10.5。对齐网格： justify-content 和 align-content 属性

如果网格的 外边缘与网格容器的内容边缘不对应（例如，如果没有列是灵活大小的），则网格轨道在内容框内根据 justify-content 和 align-content 对齐 --- 网格容器上的属性。

（强调）

---

CSS 框对齐模块

你写了：

Flex-box中的 justify-items justify-items 是否与Grid中的—属性相同？

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

从 flexbox 规范：

1.2.模块交互

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 规范中有类似的参考资料。

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议