在 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，徽标可以向左对齐，而导航项保持在最右侧，并且整个事物可以平滑地调整（“弯曲”）以适应不同的屏幕尺寸。

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

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

#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 version

---

在撰写本文时，flexbox spec 中没有提到 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 and align-self。

问题接着问：

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

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

flexbox specification 提供了两种方法来沿主轴对齐弹性项目：

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

---

调整内容

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

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

有五个对齐选项：

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

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

• center ~ 弹性物品被包装到线的中心。

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

• space-around ~ 与space-between 相同，只是两端有半角空格。

---

自动边距

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

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

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

---

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

来自问题的场景：

• 使一组弹性项目右对齐 (justify-content: flex-end) 但让第一项左对齐 (justify-self: flex-start)

  考虑一个包含一组导航项和一个徽标的标题部分。和 justify-self 徽标可以左对齐，而导航项目保持不变 最右边，整个事情顺利调整（“弯曲”）到 不同的屏幕尺寸。

---

其他有用的场景：

---

在角落放置一个弹性项目

来自问题的场景：

• 将弹性项目放在角落.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;
}

当centering a flex item that overflows the container 时，此替代方案很有用。

---

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

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

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

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

当然，这种方法在语义上也没什么大不了的。

或者，您可以使用伪元素代替实际的 DOM 元素。或者您可以使用绝对定位。此处介绍了所有三种方法：Center and bottom-align flex items

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

---

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

来自问题的场景：

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

  请注意，如果相邻项具有不同的宽度 (see demo)，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 规范允许absolute positioning of flex items。这允许中间项完全居中，而不管其兄弟项的大小。

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

在下面的示例中，中间项目以绝对定位居中，外部项目保持流入。但同样的布局可以通过相反的方式实现：将中间项以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 边距将外部 spans 左右移动。

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

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

8.1. Aligning with auto margins

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

---

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

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

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

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

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

更新：浏览器已经开始实现 space-evenly，它完成了上述工作。详情见此贴：Equal space between flex items

---

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

Answer 2

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

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

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

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

制作精美布局的难易程度无穷无尽，看看这个“复杂”的例子。

Answer 3

这是在 www 样式列表和 Tab Atkins（规范编辑）provided an answer explaining why 上提出的。我会在这里详细说明。

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

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

---

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

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

相比之下，在交叉轴上，我们同时拥有 *-self 和 *-content 属性。一个决定我们如何在 许多 flex 行周围分配空间 (align-content)，而另一个 (align-self) 决定如何在 单个 flex 项周围分配空间在交叉轴上，在给定的柔性线内。

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

Answer 4

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

参考：Box alignment in CSS Grid Layout

Answer 5

我知道这不使用 flexbox，但是对于三个项目的简单用例（一个在左侧，一个在中心，一个在右侧），这可以通过在父级上使用 display: grid 轻松完成，@ 987654323@ 用于孩子，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;。

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