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

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

^{来源： W3C}

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

• justify-content

要沿着横轴alignment弹性项目，有三个属性：

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

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

但是，这些方向可以很容易地与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都相等，方便来回切换。

那么为什么十字轴会有两个额外的alignment属性？

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

为什么主轴不能得到一个justify-self财产？

---

这些属性将是有用的scheme：

• 将柔性物品放置在柔性容器的拐angular处
  #box3 { align-self: flex-end; justify-self: flex-end; }

• 使一组flex对象右alignment（ justify-content: flex-end ），但将第一项alignment左alignment（ justify-self: flex-start ）

  考虑一个包含一组导航项和标志的标题部分。 通过justify-self ，徽标可以左侧alignment，而导航项目保持最佳状态，整个过程可以平滑调整（“弯曲”）至不同的屏幕尺寸。

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

  请注意，如果相邻的项目具有不同的宽度space-between在justify-content属性space-between值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 middle box will only be truly centered if adjacent boxes are equal width</p> 

jsFiddle版本

---

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

然而，在CSS盒子alignment模块中 ，这是W3C的未完成的build议，build立一套通用的alignment属性，以便在所有盒子模型中使用，这是：

^{来源： W3C}

你会注意到justify-self和justify-items正在考虑…… 但不是flexbox 。

---

我最后要重申一下主要问题：

为什么没有“certificate物品”和“certificate自我”的属性？

Answer 1

沿着主轴alignment柔性物品的方法

如问题所述：

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

要沿着横轴alignment弹性项目，有三个属性： align-content ， align-items和align-self 。

这个问题然后问：

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

一个答案可能是： 因为他们没有必要。

Flexbox规范提供了两种沿主轴alignmentFlex项目的方法：

1. justify-content关键字属性，和
2. auto利润率

---

certificate内容

justify-content属性沿flex容器的主轴alignmentFlex项目。

它应用于柔性容器，但仅影响柔性项目。

有五个alignment选项：

• flex-start start〜Flex项目被打包到行的开头。

  

• flex-end end〜Flex项目被打包到行尾。

  

• center 〜弹性项目被挤向线路的中心。

  

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

  

• space-around around〜与space-between相同，除了两端都有半angular空格。

  

---

汽车边距

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

与适用于flex容器的justify-content不同， auto边距将放在flex项目上。

---

将一组弹性项目alignment到右侧，但是第一个项目在左侧

从这个问题的情景：

• 使一组flex对象右alignment（ justify-content: flex-end ），但将第一项alignment左alignment（ justify-self: flex-start ）

  考虑一个包含一组导航项和标志的标题部分。 通过justify-self ，徽标可以左侧alignment，而导航项目保持最佳状态，整个过程可以平滑调整（“弯曲”）至不同的屏幕尺寸。

---

其他有用的情况：

---

在angular落放置一个弹性物品

从这个问题的情景：

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

---

以垂直和水平方向居中放置Flex项目

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

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

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

你可以在flex项目上使用它：

 .box56 { margin: auto; } 

当对容器溢出的Flex项目进行居中时，此替代方法很有用。

---

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

Flex容器通过分配可用空间来alignmentFlex项目。

因此，为了创造平衡的平衡 ，一个中间产品可以集中在一个单一的物品旁边，必须引入平衡。

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

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

或者，您可以使用伪元素而不是实际的DOM元素。 或者你可以使用绝对定位。 所有三种方法都在这里介绍： 中心和底部alignment弹性项目

注意：上面的例子只有在真正对中的情况下才能工作 – 当最外层的项目是相同的高度/宽度时。 如果弹性项目的长度不同，请参阅下一个示例。

---

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

从这个问题的情景：

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

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

如上所述，除非所有弹性物品的宽度或高度相同（取决于flex-direction ），否则中间物品不能真正居中。 这个问题使得justify-self财产（devise来处理任务，当然）的一个强有力的例子。

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

Answer 2

我不知道答案，但我喜欢为这件事情做出贡献。 如果他们能够为flexbox发布justify-self ，使其真正具有灵活性，那将是非常好的。

我相信当轴上有多个项目时， justify-self行为的最合理的方法是将自己与它最近的邻居（或边缘）alignment，如下所示。

我真的希望W3C能够看到这一点，至less会考虑这一点。 =）

这样，无论左右框的大小如何，您都可以拥有一个真正居中的物品。 当其中一个盒子到达中央盒子的那个点时，它将只是推动它，直到没有更多的空间分配。

制作真棒布局的难易程度是无止境的，请看看这个“复杂”的例子。

Answer 3

这是在www风格的名单上提出的，Tab Atkins（spec编辑） 提供了一个解释原因的答案 。 我会在这里详细说明一下。

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

对于多线柔性电缆，相同的逻辑适用于每个“柔性线”。 在给定的行中，项目在横轴上单独排列（因为每行只有一个项目在横轴上），而在主轴上则是统一的。

---

这里有另外一种措辞：所以， *-self和*-content *-self属性都是关于如何在事物周围分配额外空间的。 但是关键的区别在于*-self版本适用于那个轴上只有一个单一的东西的情况，而*-self版本是在这个轴中有很多东西的情况下 。 单事件与多事件场景是不同types的问题，因此它们具有不同types的可用选项 – 例如，值space-between的space-around / space-between对于*-content有意义，但对于*-self 。

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

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

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

Answer 4

有justify-self ，但在Chrome金丝雀，而不是在铬稳定版本。 甚至justify-items ：

但据我所知，这些属性也不起作用。 所以可能谷歌事先为未来的CSS版本保存。 只能希望他们很快就会join这个属性。