在 CSS Flexbox 中，为什么没有“justify-items”和“justify-self”属性？

Question

考虑弹性容器的主轴和交叉轴：

_{资料来源： W3C}

要沿主轴对齐弹性项目，有一个属性：

• justify-content

要沿交叉轴对齐弹性项目，有三个属性：

• align-content
• align-items
• align-self

在上图中，主轴是水平的，横轴是垂直的。 这些是弹性容器的默认方向。

但是，这些方向可以很容易地与flex-direction属性互换。

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

（交叉轴始终垂直于主轴。）

我在描述轴的工作原理时的意思是，这两个方向似乎都没有什么特别之处。 主轴，交叉轴，它们在重要性方面是相同的，而flex-direction可以很容易地来回切换。

那么为什么交叉轴会获得两个额外的对齐属性呢？

为什么align-content和align-items合并为主轴的一个属性？

为什么主轴没有获得justify-self属性？

---

这些属性有用的场景：

• 将弹性项目放置在弹性容器的角落
  #box3 { align-self: flex-end; justify-self: flex-end; }

• 使一组弹性项目右对齐（ justify-content: flex-end ）但第一个项目左对齐（ justify-self: flex-start ）

考虑一个带有一组导航项和一个徽标的标题部分。 使用justify-self ，徽标可以向左对齐，而导航项目保持在最右侧，并且整个事物可以平滑地调整（“弯曲”）以适应不同的屏幕尺寸。

• 在一行三个 flex 项目中，将中间项目附加到容器的中心（ justify-content: center ）并将相邻项目与容器边缘对齐（ justify-self: flex-start和justify-self: flex-end ）。

请注意，如果相邻项具有不同的宽度，则justify-content属性上的值space-around和space-between不会使中间项以容器为中心。

 #container { display: flex; justify-content: space-between; background-color: lightyellow; } .box { height: 50px; width: 75px; background-color: springgreen; } .box1 { width: 100px; } .box3 { width: 200px; } #center { text-align: center; margin-bottom: 5px; } #center > span { background-color: aqua; padding: 2px; }

 <div id="center"> <span>TRUE CENTER</span> </div> <div id="container"> <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> </div> <p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

jsFiddle 版本

---

在撰写本文时， flexbox 规范中没有提及justify-self或justify-items 。

然而，在CSS Box Alignment Module中，这是 W3C 的未完成提案，旨在建立一套通用的对齐属性以供所有盒子模型使用，有这样的：

_{资料来源： W3C}

您会注意到justify-self和justify-items正在考虑中……但不适用于 flexbox 。

---

最后，我将重申主要问题：

为什么没有“justify-items”和“justify-self”属性？

Answer 1

沿主轴对齐 Flex 项目的方法

如问题所述：

要沿主轴对齐弹性项目，有一个属性： justify-content

要沿交叉轴对齐弹性项目，有三个属性： align-content 、 align-items和align-self 。

然后问题问：

为什么没有justify-items和justify-self属性？

一个答案可能是：因为它们不是必需的。

flexbox 规范提供了两种沿主轴对齐弹性项目的方法：

1. justify-content关键字属性，以及
2. auto边距

---

证明内容

justify-content属性沿弹性容器的主轴对齐弹性项目。

它应用于弹性容器，但只影响弹性项目。

有五个对齐选项：

• flex-start ~ Flex 项目被打包到行首。

  

• flex-end ~ Flex 项目在行尾打包。

  

• center ~ Flex 项目被包装到线的中心。

  

• space-between ~ Flex 项目是均匀分布的，第一个项目与容器的一个边缘对齐，最后一个项目与另一个边缘对齐。 第一项和最后一项使用的边缘取决于flex-direction和写入模式（ ltr或rtl ）。

  

• space-around ~ 与space-between相同，但两端有一半大小的空格。

  

---

自动边距

使用auto边距，弹性项目可以居中、隔开或打包成子组。

与应用于弹性容器的justify-content不同， auto边距适用于弹性项目。

它们通过消耗指定方向上的所有可用空间来工作。

---

将一组弹性项目向右对齐，但第一个项目向左对齐

来自问题的场景：

• 使一组弹性项目右对齐（ justify-content: flex-end ）但第一个项目左对齐（ justify-self: flex-start ）

  考虑一个带有一组导航项和一个徽标的标题部分。 使用justify-self ，徽标可以向左对齐，而导航项目保持在最右侧，并且整个事物可以平滑地调整（“弯曲”）以适应不同的屏幕尺寸。

---

其他有用的场景：

---

在角落放置一个弹性项目

来自问题的场景：

• 将 flex 项目放在角落.box { align-self: flex-end; justify-self: flex-end; } .box { align-self: flex-end; justify-self: flex-end; }

---

将弹性项目垂直和水平居中

margin: auto是justify-content: center和align-items: center的替代品。

而不是 flex 容器上的这段代码：

.container {
    justify-content: center;
    align-items: center;
}

您可以在弹性项目上使用它：

.box56 {
    margin: auto;
}

当使溢出容器的 flex 项居中时，这种替代方法很有用。

---

居中一个弹性项目，并在第一个和边缘之间居中第二个弹性项目

弹性容器通过分配可用空间来对齐弹性项目。

因此，为了创建相等的平衡，以便中间项目可以在容器中居中，旁边有单个项目，必须引入平衡。

在下面的示例中，引入了不可见的第三个弹性项目（方框 61 和 68）来平衡“真实”项目（方框 63 和 66）。

当然，这种方法在语义上没什么好说的。

或者，您可以使用伪元素代替实际的 DOM 元素。 或者您可以使用绝对定位。 此处涵盖了所有三种方法：居中和底部对齐 flex 项目

注意：上面的示例仅在最外面的项目高度/宽度相等时才有效 - 就真正的居中而言。 当弹性项目的长度不同时，请参见下一个示例。

---

当相邻项目的大小不同时将弹性项目居中

来自问题的场景：

• 在一行三个 flex 项目中，将中间项目附加到容器的中心（ justify-content: center ）并将相邻项目与容器边缘对齐（ justify-self: flex-start和justify-self: flex-end ）。

  请注意，如果相邻项目具有不同的宽度，则justify-content属性上的值space-around和space-between将不会使中间项目相对于容器居中（参见演示）。

如前所述，除非所有 flex 项目的宽度或高度相同（取决于flex-direction ），否则中间项目不能真正居中。 这个问题为justify-self属性提供了一个强有力的案例（当然是为了处理任务而设计的）。

 #container { display: flex; justify-content: space-between; background-color: lightyellow; } .box { height: 50px; width: 75px; background-color: springgreen; } .box1 { width: 100px; } .box3 { width: 200px; } #center { text-align: center; margin-bottom: 5px; } #center > span { background-color: aqua; padding: 2px; }

 <div id="center"> <span>TRUE CENTER</span> </div> <div id="container"> <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> </div> <p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

以下是解决此问题的两种方法：

解决方案#1：绝对定位

flexbox 规范允许弹性项目的绝对定位。 这允许中间项目完全居中，而不管其兄弟项目的大小。

请记住，就像所有绝对定位的元素一样，这些项目将从文档流中删除。 这意味着它们不会占用容器中的空间并且可以重叠它们的兄弟姐妹。

在下面的示例中，中间项目以绝对定位居中，外部项目保持流入。 但是同样的布局可以用相反的方式实现：用justify-content: center并绝对定位外部项目。

解决方案 #2：嵌套 Flex 容器（无绝对定位）

 .container { display: flex; } .box { flex: 1; display: flex; justify-content: center; } .box71 > span { margin-right: auto; } .box73 > span { margin-left: auto; } /* non-essential */ .box { align-items: center; border: 1px solid #ccc; background-color: lightgreen; height: 40px; }

 <div class="container"> <div class="box box71"><span>71 short</span></div> <div class="box box72"><span>72 centered</span></div> <div class="box box73"><span>73 loooooooooooooooong</span></div> </div>

以下是它的工作原理：

• 顶级 div ( .container ) 是一个弹性容器。
• 每个子 div ( .box ) 现在都是一个弹性项目。
• 每个.box项目都被赋予flex: 1以平均分配容器空间。
• 现在这些项目正在消耗行中的所有空间并且宽度相等。
• 使每个项目成为（嵌套的）弹性容器并添加justify-content: center 。
• 现在每个span元素都是居中的弹性项目。
• 使用 flex auto边距来左右移动外部span 。

您也可以放弃justify-content并专门使用auto边距。

但是justify-content可以在这里工作，因为auto边距始终具有优先权。 从规范：

8.1。 与auto边距对齐

在通过justify-content和align-self之前，任何正的可用空间都会分配到该维度的自动边距。

---

justify-content：空间相同（概念）

回到justify-content一分钟，这里有一个更多选项的想法。

• space-same ~ space-between和space-around的混合体。 Flex 项目是均匀分布的（如space-between ），除了两端不是半角空格（如space-around ），两端都有全角空格。

这种布局可以通过 flex 容器上的::before和::after伪元素来实现。

^{（信用： @oriol用于代码， @crl用于标签）}

更新：浏览器已经开始实现space-evenly ，它完成了上述工作。 有关详细信息，请参阅此帖子：弹性项目之间的相等空间

---

PLAYGROUND （包括上述所有示例的代码）

Answer 2

我知道这不是一个答案，但我想为这件事做出贡献。 如果他们可以为 flexbox 发布justify-self以使其真正灵活，那就太好了。

我相信，当轴上有多个项目时， justify-self最合乎逻辑的行为方式是将自身与其最近的邻居（或边缘）对齐，如下所示。

我真的希望 W3C 注意到这一点并且至少会考虑它。 =)

这样，无论左右框的大小如何，您都可以拥有真正居中的项目。 当其中一个盒子到达中心盒子的点时，它会简单地推动它，直到没有更多空间可以分配。

制作令人敬畏的布局的便利性是无穷无尽的，看看这个“复杂”的例子。

Answer 3

这是在 www-style 列表中提出的，Tab Atkins（规范编辑器） 提供了一个解释原因的答案。 我会在这里详细说明一下。

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

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

---

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

SO：在 flexbox 的主轴上，有很多东西可以分配空间。 所以一个*-content -content 属性在那里有意义，但不是一个*-self属性。

相反，在交叉轴上，我们同时拥有*-self和*-content -content 属性。 一个决定了我们将如何在许多flex 线周围分配空间（ align-content ），而另一个（ align-self ）决定如何在给定的 flex 线内在交叉轴上的各个flex 项目周围分配空间。

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

Answer 4

这是由于 flexbox 的一维性质，沿轴可能有多个项目，因此无法证明单个项目的合理性。 要在 flexbox 中沿主内联轴对齐项目，请使用justify-content属性。

参考： CSS 网格布局中的框对齐

Answer 5

我知道这不使用 flexbox，但对于三个项目的简单用例（一个在左侧，一个在中心，一个在右侧），这可以使用display: grid on parent, grid-area: 1/1/1/1; 在孩子身上，并为这些孩子的定位justify-self 。

 <div style="border: 1px solid red; display: grid; width: 100px; height: 25px;"> <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div> <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div> <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div> </div>

Answer 6

我刚刚找到了解决这个问题的方法，或者至少是我的问题。
我使用的是justify-content: space-around而不是justify-content: space-between; .

这样，末端元素将粘在顶部和底部，如果需要，您可以自定义边距。

Answer 7

有justify-self ，但是在Chrome Canary中，而不在Chrome稳定版本中。 甚至justify-items ：

但据我所知，这些属性也不起作用。 因此，可能Google事先将其保存了以用于将来的CSS版本。 只能希望他们会尽快添加属性。