考虑一个伸缩容器的主轴和十字轴:
来源:W3C
要沿主轴对齐伸缩项目，有一个属性:
justify-content
要沿着十字轴对齐伸缩项目，有三个属性:
align-content
对齐项目
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;
(交叉轴总是垂直于主轴。)
我在描述坐标轴如何工作时的观点是，两个方向似乎都没有什么特别之处。主轴，交叉轴，它们在重要性上是相等的，而弯曲方向使得来回切换很容易。
那么为什么交叉轴有两个额外的对齐属性呢?
为什么对齐内容和对齐项合并到主轴的一个属性中?
为什么主轴没有自我证明的性质?
这些属性有用的场景:
在伸缩容器的角落中放置伸缩项
#box3 {align-self: flex-end;justify-self: flex-end;｝
使一组伸缩项向右对齐(justify-content: flex-end)，但第一个项向左对齐(justify-self: flex-start)
考虑一个带有一组导航项和一个标志的标题部分。使用“justify-self”，logo可以向左对齐，而导航项则保持在最右边，整个东西可以顺畅地调整(“弯曲”)到不同的屏幕尺寸。
在一排三个伸缩项中，将中间的项粘贴到容器的中心(justify-content: center)，并将相邻的项对齐到容器边缘(justify-self: flex-start和justify-self: flex-end)。
注意，空格和空格的值为on
如果相邻项的宽度不同，则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
在撰写本文时，flexxbox规范中还没有提到“自我辩护”或“自我辩护”项目。
然而，在CSS框对齐模块中，这是W3C未完成的提案，旨在建立一组通用的对齐属性，用于所有的框模型，有这样的:
来源:W3C
你会注意到“自我辩护”和“理由项目”被考虑在内……但这并不适用于flexbox。
最后，我将重申主要问题:
为什么没有“justify-items”和“justify-self”属性?
这个问题是在www风格的列表中提出的，Tab Atkins(规范编辑器)提供了一个解释原因的答案。我将在这里详细说明一下。
To start out, let's initially assume our flex container is single-line (flex-wrap: nowrap). In this case, there's clearly an alignment difference between the main axis and the cross axis -- there are multiple items stacked in the main axis, but only one item stacked in the cross axis. So it makes sense to have a customizeable-per-item "align-self" in the cross axis (since each item is aligned separately, on its own), whereas it doesn't make sense in the main axis (since there, the items are aligned collectively).
对于多线flexbox，同样的逻辑适用于每个“flex线”。在给定的一行中，项目在交叉轴上单独对齐(因为在交叉轴上每行只有一个项目)，而在主轴上集体对齐。
Here's another way of phrasing it: so, all of the *-self and *-content properties are about how to distribute extra space around things. But the key difference is that the *-self versions are for cases where there's only a single thing in that axis, and the *-content versions are for when there are potentially many things in that axis. The one-thing vs. many-things scenarios are different types of problems, and so they have different types of options available -- for example, the space-around / space-between values make sense for *-content, but not for *-self.
SO:在flexbox的主轴上，有许多东西可以分配空间。因此，*-content属性在这里是有意义的，但*-self属性没有意义。
相反，在交叉轴中，我们同时拥有*-self和*-content属性。一个决定我们将如何在许多伸缩线(align-content)周围分配空间，而另一个(align-self)决定如何在给定的伸缩线内，在十字轴上的单个伸缩项目周围分配空间。
(这里我忽略了*-items属性，因为它们只是为*-self建立默认值。)
这个问题是在www风格的列表中提出的，Tab Atkins(规范编辑器)提供了一个解释原因的答案。我将在这里详细说明一下。
To start out, let's initially assume our flex container is single-line (flex-wrap: nowrap). In this case, there's clearly an alignment difference between the main axis and the cross axis -- there are multiple items stacked in the main axis, but only one item stacked in the cross axis. So it makes sense to have a customizeable-per-item "align-self" in the cross axis (since each item is aligned separately, on its own), whereas it doesn't make sense in the main axis (since there, the items are aligned collectively).
对于多线flexbox，同样的逻辑适用于每个“flex线”。在给定的一行中，项目在交叉轴上单独对齐(因为在交叉轴上每行只有一个项目)，而在主轴上集体对齐。
Here's another way of phrasing it: so, all of the *-self and *-content properties are about how to distribute extra space around things. But the key difference is that the *-self versions are for cases where there's only a single thing in that axis, and the *-content versions are for when there are potentially many things in that axis. The one-thing vs. many-things scenarios are different types of problems, and so they have different types of options available -- for example, the space-around / space-between values make sense for *-content, but not for *-self.
SO:在flexbox的主轴上，有许多东西可以分配空间。因此，*-content属性在这里是有意义的，但*-self属性没有意义。
相反，在交叉轴中，我们同时拥有*-self和*-content属性。一个决定我们将如何在许多伸缩线(align-content)周围分配空间，而另一个(align-self)决定如何在给定的伸缩线内，在十字轴上的单个伸缩项目周围分配空间。
(这里我忽略了*-items属性，因为它们只是为*-self建立默认值。)
