小编点评

因为 CSS flex 布局中没有 `justify-items` 和 `justify-self` 属性，这是因为 `justify-items` 和 `justify-self` 属性在 flex 布局中并非独立的属性，而是在 `align-items` 和 `align-self` 属性中实现的。 **1. 主轴和交叉轴** * 主轴：一个 flex 容器只有一个主轴，且每个 flex item拥有独立的主轴位置。 *交叉轴：每个 flex item拥有 n 个交叉轴，每个交叉轴对应一个 flex item，每个交叉轴都独立设置。 **2. CSS属性的命名规则** * `align-*` 和 `justify-*` 属性用于应用于主轴上的规则，例如 `align-items: center`。 * `*items`、`*content` 和 `*self*-self` 属性用于应用于交叉轴上的规则，例如 `align-self: center`。 **3. 结论** 由于多个元素共享一个主轴，`justify-items` 和 `justify-self` 属性无法单独应用。建议使用其他解决方案，例如 `order` 属性来对元素进行更为精细的排序。

正文

为什么 CSS flex 布局中没有 justify-items 和 justify-self？

为什么在 CSS flex 布局中存在 align-items 和 align-self，却没有 justify-items 和 justify-self 呢？要解答这个问题，首先需要理解主轴（main axis）和交叉轴（cross axis）之间的差异。

1. 主轴和交叉轴的区别

在没有折行的情况下，一个 flex 容器（flex container）只有一个主轴，但却有 n 个交叉轴（n 代表 flex item的数量）。每个 flex item 都拥有自己独立的交叉轴。

一个 flex item 在主轴上的位置会影响其他 flex item，因为它们共享相同的主轴，而交叉轴却不会引发这种相互影响。

2. CSS 属性的命名规则

2.1 align-* 和 justify-*

在 CSS flex 布局中，属性名称中的 justify-* 表示这是应用于主轴上的规则，而 align-* 表示这是应用于交叉轴上的规则。

2.2 *-items， *-content 和 *-self

*-self 表示每个 flex item 都拥有独立的轴，它们在轴上的位置不会影响其他 flex item。我们可以针对单个 item 设置它的位置。

*-items 和 *-self 在本质上相似，只不过前者是批量设置，而后者是针对单个 item 的设置。可以看作是一个语法糖。

*-content 表示多个 flex item 共享一个轴，一个 flex item 在轴上的位置会影响其他 flex item。

3. 总结

因此，在 flex 布局中，我们不能使用 justify-items，因为多个元素共享一个轴，它们属于同一组，这会导致相互干扰。想象一下：假如我们指定了justify-items: flex-end，最终只会有一个元素抢到这个位置。

同样的道理，我们也不能使用 justify-self，因为各元素之间可能会竞争位置导致冲突。但是，我们可以采用其他解决方案，例如使用 order 属性来对它们进行更为精细的排序（和flex-start、flex-end 、center 相比）。