CSS 中为什么 flexbox 没有 justify items 和 justify self 属性？

CSS Flexbox 是一个用于在页面上布局元素的强大工具，它提供了一系列的属性用来对齐和分布容器内的子元素。在 Flexbox 中，关于元素的对齐，我们主要使用以下属性：

• justify-content: 用来对齐一个容器内的子元素们（flex items）沿着主轴（main axis）的。
• align-items: 用来对齐一个容器内的子元素们沿着交叉轴（cross axis）。
• align-self: 允许单个子元素有不同于容器的 align-items 属性的对齐方式。

在 CSS Grid 布局中，有 justify-items 和 justify-self 属性，它们分别用来对齐网格项目（grid items）在网格区域内沿着行轴的对齐方式（即主轴对齐），以及允许单个网格项有不同于网格容器的 justify-items 属性设定的对齐方式。

而在 Flexbox 中，没有 justify-items 和 justify-self 这样的属性，原因有以下几点：

1. 主轴对齐通过 justify-content 控制：在 Flexbox 中，主轴（横向或纵向）的对齐是通过 justify-content 属性来控制的，它影响整个容器内所有子元素的对齐方式。这意味着所有子元素作为一个整体在主轴方向上的间距和分布。

2. 单个子元素在主轴上的控制：如果想要单独控制某个子元素在主轴上的位置，可以使用 margin 属性（如 margin-left, margin-right, margin-top, margin-bottom 或简写形式 margin），这样可以对单个子元素进行“推”或“拉”的操作来改变它们在主轴上的位置。

3. 交叉轴对齐：对于交叉轴，Flexbox 提供了 align-items 来控制所有子元素的默认对齐方式，同时也提供了 align-self 来允许单个子元素有自己的交叉轴对齐方式，这与 Grid 的 justify-self 属性类似，只不过是应用于交叉轴而不是主轴。

因此，在 Flexbox 的设计中，justify-content, align-items, 和 align-self 这三个属性已经足够用来控制子元素在主轴和交叉轴上的对齐和分布。justify-items 和 justify-self 属性在 Flexbox 上下文中不是必需的，因为已经有其他属性覆盖了它们的功能。而且，Flexbox 主要是为了一维布局设计的，而 Grid 是为了更复杂的二维布局设计的，这也是为什么 Grid 有更详尽的对齐控制属性。

这是在 www-style 列表上被问到的，Tab Atkins（规范编辑）提供了一个答案，解释了原因。我将在这里详细说明这一点。

首先，我们首先假设我们的 Flex 容器是单行的 ( flex-wrap: nowrap)。在这种情况下，主轴和交叉轴之间明显存在对齐差异 - 主轴上堆叠了多个项目，但交叉轴上仅堆叠了一个项目。因此，在横轴上有一个可定制的每项“自我对齐”是有意义的（因为每个项目都是单独对齐的），而在主轴上则没有意义（因为在那里，项目集体对齐）。

对于多行 Flexbox，相同的逻辑适用于每个“Flex Line”。在给定的行中，项目在交叉轴上单独对齐（因为交叉轴上每行只有一个项目），而不是在主轴上集体对齐。

---

这是另一种表达方式：因此，所有*-self和属性*-content都是关于如何在事物周围分配额外空间。但关键的区别在于，*-self版本适用于_该轴上只有一个事物的_情况，而*-content版本适用于_该轴上可能有很多事物的情况_。一件事与多件事场景是不同类型的问题，因此它们有不同类型的可用选项 - 例如， /space-around值space-between对于 有意义*-content，但对于 则无效*-self。

SO：在弹性盒的主轴上，有很多东西可以分配空间。因此，*-content财产在那里有意义，但不是*-self财产。

相反，在横轴上，我们同时具有 a*-self和 a*-content属性。一个决定如何在_多条_伸缩线 ( )周围分配空间align-content，而另一个 ( align-self) 决定如何在给定的伸缩线内，在横轴上的_各个伸缩项目周围分配空间。_

（我*-items在这里忽略属性，因为它们只是为 建立默认值*-self。）