关注公众号
不定期副业成功案例分享
我真的很困惑。在寻找在线资源和文档时，这些属性的大部分文档似乎都引用了 Flex-box，而不是网格。而且我不知道 Flex-box 中等效属性的文档对网格的适用性如何。
因此，我尝试引用 https://css-tricks.com/snippets/css/complete-guide-grid/，它将它们定义如下：
justify-items - 沿行轴对齐网格项目内的内容
justify-content - 此属性沿行轴对齐网格
justify-self - 沿行轴对齐网格项目内的内容
但我仍然不明白它们之间的区别是什么。所以，我有 3 个问题要澄清。
Flex-box 中的 justify-items 属性是否与 Grid 中的 justify-items 属性相同？或者它们有什么不同？ （换句话说，我可以为 Grid 重用 Flex-box 文档）（justify-）content、self 和 items 做什么？ （证明-）内容、自我和项目有何不同？
任何澄清将不胜感激。
编辑：由于每个人都一直给我 Flex-box 资源，我问的是 css-grid，而不是 flex-box。
justify-items 属性。由于网格的 justify-items 是主轴，也许您在谈论 justify-content？
要回答您的问题：
1
正如 reiallenramos 所提到的，“justify-self 和 justify-items 属性没有在 flexbox 中实现。这是由于 flexbox 的一维性质，并且沿轴可能有多个项目，因此无法证明单个项目。要沿 flexbox 中的主内联轴对齐项目，请使用 justify-content 属性。 - MDN
2-3
https://i.stack.imgur.com/yedYz.png
很高兴知道：
有关更多信息和示例，我建议您查看：
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/
CSS Grid 中 justify-content、justify-items 和 justify-self 之间的主要区别：
justify-content 属性控制网格列的对齐方式。它设置在网格容器上。它不适用于或控制网格项的对齐方式。
justify-items 属性控制网格项的对齐方式。它设置在网格容器上。
justify-self 属性覆盖单个项目上的 justify-items。默认情况下，它在网格项目上设置并继承 justify-items 的值。
例子
这是一个 2x3 网格。
2 列，每列 100 像素宽
行，每行 50 像素高
容器是：
500 像素宽
250 像素高
https://i.stack.imgur.com/TbTgl.png
.container { 显示：网格；网格模板列：100px 100px；网格模板行：50px 50px 50px；宽度：500px；高度：250px；网格模板区域：“一二”“三四”“五六”； } .box:nth-child(1) { 网格区域：一个； } .box:nth-child(2) { 网格区域：两个； } .box:nth-child(3) { 网格区域：三； } .box:nth-child(4) { 网格区域：四； } .box:nth-child(5) { 网格区域：五； } .box:nth-child(6) { 网格区域：六； } /* 非必要的装饰风格 */ body { display: flex;证明内容：中心； } .container { 背景颜色：#ddd;边框：1px 实心#aaa； } .box { 背景颜色：浅绿色；边框：1px 纯灰色；显示：弯曲；证明内容：中心；对齐项目：居中；字体大小：1.2em； }
证明内容
justify-content 属性在容器内对齐列。
https://i.stack.imgur.com/3wfXw.png
.container { justify-content: space-between; } .container { 显示：网格；网格模板列：100px 100px；网格模板行：50px 50px 50px；宽度：500px；高度：250px；网格模板区域：“一二”“三四”“五六”； } .box:nth-child(1) { 网格区域：一个； } .box:nth-child(2) { 网格区域：两个； } .box:nth-child(3) { 网格区域：三； } .box:nth-child(4) { 网格区域：四； } .box:nth-child(5) { 网格区域：五； } .box:nth-child(6) { 网格区域：六； } /* 非必要的装饰风格 */ body { display: flex;证明内容：中心； } .container { 背景颜色：#ddd;边框：1px 实心#aaa； } .box { 背景颜色：浅绿色；边框：1px 纯灰色；显示：弯曲；证明内容：中心；对齐项目：居中；字体大小：1.2em； }
使用 justify-content: space-between 时，两列都固定在边缘。网格项移动只是因为它们存在于这些列中。否则它们不受影响。
请注意，此属性仅在容器中有可用空间时才有效。如果使用 fr 调整任何列的大小，则将消耗所有可用空间，并且 justify-content 将不起作用。
对齐项目
justify-items 属性将 网格项 在其轨道内对齐（而不是整个容器）
https://i.stack.imgur.com/1q9lt.png
.container { justify-items: center; } .container { 显示：网格；网格模板列：100px 100px；网格模板行：50px 50px 50px；宽度：500px；高度：250px；网格模板区域：“一二”“三四”“五六”； } .box:nth-child(1) { 网格区域：一个； } .box:nth-child(2) { 网格区域：两个； } .box:nth-child(3) { 网格区域：三； } .box:nth-child(4) { 网格区域：四； } .box:nth-child(5) { 网格区域：五； } .box:nth-child(6) { 网格区域：六； } /* 非必要的装饰风格 */ body { display: flex;证明内容：中心； } .container { 背景颜色：#ddd;边框：1px 实心#aaa； } .box { 背景颜色：浅绿色；边框：1px 纯灰色；显示：弯曲；证明内容：中心；对齐项目：居中；字体大小：1.2em； }
使用 justify-items: center，网格项目在其列中居中。
自我辩护
justify-self 属性覆盖各个项目的 justify-items。
https://i.stack.imgur.com/abBSQ.png
.container { justify-items: center;} .box:nth-child(2) { justify-self: start; } .box:nth-child(3) { justify-self: end; } .box:nth-child(6) { justify-self: 拉伸； } .container { 显示：网格；网格模板列：100px 100px；网格模板行：50px 50px 50px；宽度：500px；高度：250px；网格模板区域：“一二”“三四”“五六”； } .box:nth-child(1) { 网格区域：一个； } .box:nth-child(2) { 网格区域：两个； } .box:nth-child(3) { 网格区域：三； } .box:nth-child(4) { 网格区域：四； } .box:nth-child(5) { 网格区域：五； } .box:nth-child(6) { 网格区域：六； } /* 非必要的装饰风格 */ body { display: flex;证明内容：中心； } .container { 背景颜色：#ddd;边框：1px 实心#aaa； } .box { 背景颜色：浅绿色；边框：1px 纯灰色；显示：弯曲；证明内容：中心；对齐项目：居中；字体大小：1.2em； }
对齐内容、对齐项目和对齐自我
这些属性的作用与其 justify-* 对应物相同，但在垂直方向上。
更多信息：What is the difference between align-items vs. align-content in Grid Layout?
规格参考
10.3.行轴对齐： justify-self 和 justify-items 属性 网格项可以通过使用网格项上的 justify-self 属性或网格容器上的 justify-items 属性在内联维度中对齐。 10.4.列轴对齐：align-self 和 align-items 属性 网格项也可以通过使用网格项上的 align-self 属性或网格上的 align-items 属性在块维度（垂直于内联维度）中对齐容器。 10.5。对齐网格：justify-content 和 align-content 属性到网格容器上的 justify-content 和 align-content 属性。 （重点补充）
CSS 框对齐模块
你写了：
Flex-box 中的 justify-items 属性是否与 Grid 中的 justify-items 属性相同？
尽管 Flex 和 Grid 规范为关键字对齐属性（例如 justify-items 和 align-content）提供了自己的定义，但 W3C 正在逐步淘汰单个盒子模型的对齐属性并实施其新的 Box Alignment Module，它寻求定义一组用于所有盒子模型的对齐属性。
来自 flexbox 规范：
1.2.模块交互 CSS 框对齐模块扩展并取代了此处介绍的对齐属性（justify-content、align-items、align-self、align-content）的定义。
Grid 规范中有类似的参考。
好的，感谢 Michael_B，我想我明白了。我的困惑来自这样一个事实，即有时不同的属性不会随机改变网格布局的任何内容。
justify-content 允许您将网格放置在其网格容器中。这就是为什么如果网格容器与网格大小相同， justify-content 属性将不起作用的原因。 （如果您使用 fr 单位，情况总是如此）。这也是它可以具有以下值的原因：space-around、space-between 和 space-evenly（除了 start、end、center 和 stretch），这将打破网格并将网格项目放置在网格容器中。这是网格容器的属性。
justify-items 允许您为放置在网格的网格项中的内容设置默认位置（网格项是网格中的一个框，如 Michael_B 的帖子中所定义）。这是网格容器的属性。
justify-self 允许您覆盖单个单元格中内容的默认位置。这将覆盖由 justify-items 设置的位置。因此，如果您对容器的所有子项使用 justify-self，则在网格容器上设置 justify-items 将无效。这是网格项内内容的属性。
注意：如果您将网格项本身设为网格，（换句话说，网格项内的内容是网格），那么您可以使用 justify-self 属性或 justify-content 将其定位在外部网格项中内部网格的网格容器上的属性，因为内部网格的网格容器是外部网格的网格项的内容之一。
正如您所料，所有这些也适用于 align-* 属性。
如果我有任何错误，请纠正我
justify-content 用于当网格项的总大小小于网格容器时，沿网格容器的行/内联轴定位整个网格。
justify-items 用于网格容器，用于通过为所有子框设置默认 justify-self 属性来确定网格项如何沿行展开。
justify-self 用于设置单个网格项如何沿行/内联轴定位自身。默认情况下，网格项目继承容器上 justify-items 属性的值，因此如果设置了 justify-self 值，它将覆盖继承的 justify-items 值。
来源：Codecademy CSS Grid cheatsheet
justify-self 用于水平对齐内容在其单元格内的位置。
而 align-self 用于在其单元格中垂直对齐内容的位置。
这是使用 justify-self: start; 对齐项目的结果
THE RESULT FOR THE CODE justify-self: start;
flex-direction 值/
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。