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

Question

考虑伸缩容器的主轴和横轴：
要沿主轴对齐弹性项目，有一个属性：

• justify-content

要沿十字轴对齐弹性项目，需要三个属性：

• 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可以轻松地来回切换。

那么，为什么十字轴具有两个附加的对齐属性？

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

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

这些属性将有用的方案：

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

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

考虑带有一组导航项和徽标的标题部分。随着justify-self标志可以左对齐，而资产净值的项目留最右边，并顺利整件事调整（“挠曲”），以不同的屏幕尺寸。

• 在三个伸缩项目的行中，将中间项目粘贴到容器的中心（justify-content: center），然后将相邻的项目与容器的边缘对齐（justify-self: flex-start和justify-self: flex-end）。

请注意，如果相邻项目的宽度不同，则value space-around和space-betweenon 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>

Answer 1

沿主轴对齐弹性项目的方法

如问题所述：

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

沿横轴对准柔性项目有三个属性：align-content，align-items和align-self。

然后问题问：

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

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

所述Flexbox的规范提供2点用于对准沿主轴弯曲的物品的方法：

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

证明内容

该justify-content属性使伸缩项沿伸缩容器的主轴对齐。

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

有五个对齐选项：

• flex-start 〜Flex项目包装在行的开头。

• flex-end 〜Flex项目包装在行尾。

• center 〜柔性物品被包装到行的中心。

• space-between〜柔性物品均匀间隔，第一个物品与容器的一个边缘对齐，最后一个物品与相对的边缘对齐。第一项和最后一项使用的边缘取决于flex-direction和写入模式（ltr或rtl）。

• space-around〜space-between除两端留半角空格外，其余均相同。

自动保证金
使用automargins，可以将弹性项目居中，隔开或打包成子组。

与justify-content应用于flex容器的方法不同，auto在flex项上使用边距。

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

将一组弹性项目向右对齐，但将第一项向左对齐
问题的场景：

• 使一组弹性项目右对齐（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;
}

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

.box56 {
    margin: auto;
}

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

将弹性项目居中，将第二个弹性项目居中于第一个和边缘之间
flex容器通过分配可用空间来对齐flex项目。

因此，为了创建平衡，以便中间物品可以在容器中居中放置单个物品，必须引入平衡。

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

当然，就语义而言，此方法并不是什么好事。

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

注意：仅当最外层项目的高度/宽度相等时，以上示例才有效（就真正居中而言）。如果弹性商品的长度不同，请参见下一个示例。

当相邻项目的大小不同时，将弹性项目居中
问题的场景：

• 在三个伸缩项目的行中，将中间项目粘贴到容器的中心（justify-content: center），然后将相邻的项目与容器的边缘对齐（justify-self: flex-start和 justify-self: flex-end）。

请注意，如果相邻项目的宽度不同，则value space-around和space-betweenon justify-content属性不会使中间项目相对于容器居中（请参见demo）。

如前所述，除非所有弹性项目的宽度或高度相等（取决于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）是flex容器。
• 现在，每个子div（.box）都是一个弹性项目。
• .box给出每个项目是flex: 1为了平均分配容器空间。
• 现在，这些项目占用了该行中的所有空间，并且宽度相等。
• 使每个项目成为一个（嵌套的）flex容器并添加justify-content: center。
• 现在，每个span元素都是居中的弹性项目。
• 使用伸缩auto边距左右移动外边的spans。
• 您也可以放弃justify-content并仅使用auto边距。

但是justify-content可以在这里工作，因为auto保证金始终是优先事项。从规格：

8.1。与auto 边距对齐

在通过justify-content和对齐之前align-self，任何正的自由空间都会分配给该维度中的自动边距。

证明内容：空间相同（概念）
回到justify-content一分钟，这里是一个更多选择的想法。

• space-same〜的混合space-between和space-around。Flex项目的间距是均匀的（如space-between），除了两端没有半角空格（如space-around），两端还有全角空格。
  这种布局可以用能够实现::before和::after柔性容器上伪元素。