沿主轴对齐伸缩项目的方法
如问题所述:
要沿主轴对齐伸缩项，有一个属性:justify-content
要沿十字轴对齐伸缩项目，有三个属性:align-content, align-items和align-self。
接下来的问题是:
为什么没有证明项目和证明自我属性?
一个答案可能是:因为它们不是必需的。
flexbox规范提供了两种方法来沿着主轴对齐伸缩项:
justify-content关键字属性和
汽车的利润
justify-content
justify-content属性将伸缩项沿伸缩容器的主轴对齐。
它应用于伸缩容器，但只影响伸缩项。
有五个对齐选项:
flex-start ~ Flex items are packed toward the start of the line.
flex-end ~ Flex items are packed toward the end of the line.
center ~ Flex items are packed toward the center of the line.
space-between ~ Flex items are evenly spaced, with the first item aligned to one edge of the container and the last item aligned to the opposite edge. The edges used by the first and last items depends on flex-direction and writing mode (ltr or rtl).
space-around ~ Same as space-between except with half-size spaces on both ends.
汽车的利润
使用自动页边距，可将伸缩项居中、间隔或打包成子组。
与应用于伸缩容器的justify-content不同，auto margin适用于伸缩项。
它们的工作原理是消耗指定方向上的所有自由空间。
将一组伸缩项向右对齐，但将第一个项向左对齐
问题中的场景:
使一组伸缩项目对齐-右(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;
}
你可以在伸缩项目上使用这个:
.box56 {
margin: auto;
}
当将溢出容器的伸缩项居中时，此替代方法非常有用。
将一个伸缩项居中，并在第一个和边缘之间居中第二个伸缩项
伸缩容器通过分配空闲空间来对齐伸缩项。
因此，为了创造相等的平衡，使中间的物品可以在容器的中心，旁边还有一件物品，必须引入平衡。
在下面的例子中，无形的第三个伸缩物品(第61和68框)被引入来平衡“真实”物品(第63和66框)。
当然，这种方法在语义上并没有什么了不起的。
或者，您可以使用伪元素而不是实际的DOM元素。或者你可以使用绝对定位。这里涵盖了所有三种方法:居中对齐和底部对齐伸缩项
注意:上面的例子只在最外层的项目高度/宽度相等的情况下才有效——就真正的居中而言。当伸缩项的长度不同时，请参见下一个示例。
当相邻项目大小不同时，将伸缩项目居中
问题中的场景:
在一行三个伸缩项目中，将中间的项目固定在容器的中心(justify-content: center)，并对齐相邻的项目
项到容器边缘(justify-self: flex-start和
justify-self: flex-end)。
注意，在justify-content属性中，如果相邻项的宽度不同，则空格和空格的值将不会保持中间项相对于容器的居中(参见演示)。
如上所述，除非所有伸缩项的宽度或高度相等(取决于伸缩方向)，否则中间的项不能真正居中。这个问题为使用justification -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项目的绝对定位。这允许中间的项目完全居中，而不管其兄弟姐妹的大小。
请记住，与所有绝对定位的元素一样，这些项将从文档流中删除。这意味着它们不占用容器中的空间，并且可以重叠它们的兄弟姐妹。
在下面的例子中，中间的项目以绝对定位居中，而外部项目保持流动。但同样的布局也可以以相反的方式实现:将中间的项目居中，并将外部的项目居中并绝对放置。
解决方案#2:嵌套式伸缩容器(没有绝对定位)
.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)是一个伸缩容器。
每个子div (.box)现在都是一个伸缩项。
每个.box项被赋予flex: 1，以便平均分配容器空间。
现在这些项占用了行中的所有空间，并且宽度相等。
将每个项目设置为(嵌套的)伸缩容器，并添加justify-content: center。
现在每个span元素都是居中的伸缩项。
使用弹性自动边距将外跨度左移和右移。
你也可以放弃合理内容，只使用汽车利润。
但合理内容在这里是可行的，因为汽车利润总是优先考虑的。来自规范:
8.1. 与auto对齐
利润率
在通过justify-content和align-self对齐之前，any
正自由空间分布到该维度的自动边距。
justification -content:空间相同(概念)
让我们回到“合理-内容”这个话题，这里有一个关于另一个选择的想法。
space-same ~ space-between和space-around的混合体。伸缩项目是均匀间隔的(就像空格之间)，除了两端有全尺寸的空间而不是半尺寸的空间(就像空格周围)。
这种布局可以通过flex容器上的::before和::after伪元素来实现。
(代码来自@oriol，标签来自@crl)
更新:浏览器已经开始实现空间均匀化，实现了上述功能。详见这篇文章:伸缩项目之间的空间相等
PLAYGROUND(包括上面所有示例的代码)
