沿主轴对齐 Flex 项目的方法
正如问题中所述：
要沿主轴对齐弹性项目，有一个属性：justify-content
要沿横轴对齐 Flex 项目，需要使用三个属性：align-content、align-items和align-self。
接下来的问题是：
为什么没有justify-items和justify-self属性？
一个答案可能是：因为它们没有必要。
Flexbox规范提供了_两种_沿主轴对齐 Flex 项目的方法：
- 关键字
justify-content属性，以及
auto边距
证明内容合理
该justify-content属性沿着 Flex 容器的主轴对齐 Flex 项目。
它应用于 Flex 容器，但仅影响 Flex 项目。
有五个对齐选项：
-
flex-start~ Flex 商品包装在生产线的开头。
-
flex-end~ Flex 商品在生产线末端进行包装。
-
center~ Flex 商品朝生产线的中心方向包装。
-
space-between~ Flex 项目均匀分布，第一个项目与容器的一个边缘对齐，最后一个项目与相对的边缘对齐。第一项和最后一项使用的边取决于flex-direction书写模式（ltr或rtl）。
-
space-around~space-between与两端相同，但两端有一半大小的空格。
自动边距
通过auto边距，弹性项目可以居中、间隔开或打包到子组中。
justify-content与应用于 Flex 容器的不同，auto边距适用于 Flex 项目。
它们的工作原理是消耗指定方向上的所有可用空间。
将一组弹性项目向右对齐，但第一个项目向左对齐
问题中的场景：
其他有用的场景：
在角落放置一个弹性项目
问题中的场景：
- 将弹性项目放置在角落
.box { align-self: flex-end; justify-self: flex-end; }
将弹性项目垂直和水平居中
margin: auto``justify-content: center是and的替代align-items: center。
而不是 Flex 容器上的这段代码：
.container {
justify-content: center;
align-items: center;
}
您可以在弹性项目上使用它：
当将溢出容器的弹性项目居中时，此替代方法非常有用。
将一个弹性项目居中，并将第二个弹性项目置于第一个弹性项目和边缘之间
弹性容器通过分配可用空间来对齐弹性项目。
因此，为了创建_相等的平衡_，以便中间的物品可以在容器中居中，旁边有单个物品，必须引入平衡。
在下面的示例中，引入了不可见的第三个弹性项目（框 61 和 68）来平衡“真实”项目（框 63 和 66）。
当然，这种方法在语义上并没有什么了不起。
或者，您可以使用伪元素而不是实际的 DOM 元素。或者您可以使用绝对定位。这里涵盖了所有三种方法：居中和底部对齐弹性项目
注意：上面的示例仅在真正居中时才有效 - 当最外面的项目具有相同的高度/宽度时。当弹性项目的长度不同时，请参阅下一个示例。
当相邻项目大小不同时将弹性项目居中
问题中的场景：
-
在一排三个弹性项目中，将中间项目固定到容器的中心 ( justify-content: center)，并将相邻项目与容器边缘对齐 (justify-self: flex-start和 justify-self: flex-end)。
请注意，如果相邻项目具有不同的宽度，则 valuespace-around和space-betweenonjustify-content属性不会使中间项目相对于容器居中（请参阅演示）。
如前所述，除非所有 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 规范允许Flex 项目的绝对定位。这使得中间项目能够完美居中，无论其兄弟项目的大小如何。
请记住，与所有绝对定位的元素一样，这些项目将从文档流中删除。这意味着它们不占用容器中的空间并且可以与它们的兄弟姐妹重叠。
在下面的示例中，中间项目以绝对定位居中，而外部项目保持流入。但可以以相反的方式实现相同的布局：将中间项目居中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为了平均分配容器空间而给出的。
- 现在这些项目占用了行中的所有空间并且宽度相等。
- 将每个项目设为（嵌套）弹性容器并添加
justify-content: center.
- 现在每个
span元素都是居中的弹性项目。
- 使用弹性边距左右
auto移动外部。span
您也可以放弃justify-content并auto专门使用边距。
但justify-content可以在这里工作，因为auto利润总是优先的。从规格来看：
8.1.与auto 边距对齐
justify-content在通过和进行对齐之前align-self，任何正可用空间都会分配到该维度中的自动边距。
调整内容：空间相同（概念）
回到justify-content一分钟，这里有一个想法，还有一个选择。
space-samespace-between~和的混合体space-around。 Flex 项目均匀间隔（如space-between），但两端不是半尺寸空格（如space-around），而是两端都有全尺寸空格。
::before这种布局可以通过::afterFlex 容器上的伪元素来实现。
（来源：@oriol代码，@crl标签）
更新：浏览器已经开始实现space-evenly，它完成了上述任务。有关详细信息，请参阅此帖子：Flex 项目之间的间距相等
PLAYGROUND（包括上述所有示例的代码）
