考虑一个伸缩容器的主轴和十字轴:
来源: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”属性?
