Flexbox 中的盒子对齐
The 盒子对齐 规范详细说明了各种布局方法中的对齐方式。在本页中，我们探讨了盒子对齐在 Flexbox 上下文中的工作原理。由于本页旨在详细介绍与 Flexbox 和盒子对齐相关的特定内容，因此应结合主 盒子对齐 页面进行阅读，该页面详细介绍了跨布局方法的盒子对齐的通用功能。
基本示例
在本示例中，三个 Flex 项目使用 justify-content 在主轴上对齐，使用 align-items 在交叉轴上对齐。第一个项目通过将 align-self 设置为 center 来覆盖组上设置的 align-items 值。
轴线和 flex-direction
Flexbox 尊重文档的书写模式，因此如果您使用的是英语并设置 justify-content 为 flex-end，这将使项目与 Flex 容器的末端对齐。如果您使用 flex-direction 设置为 row，则此对齐方式将位于内联方向。
但是，在 Flexbox 中，您可以通过将 flex-direction 设置为 column 来更改主轴。在这种情况下，justify-content 将在块方向对齐项目。因此，在 Flexbox 中考虑主轴和交叉轴最简单的方式如下所示
- 主轴 = 由
flex-direction设置的方向 = 通过justify-content进行对齐 - 交叉轴 = 跨越主轴 = 通过
align-content、align-self/align-items进行对齐
主轴对齐
交叉轴对齐
Flexbox 中没有 justify-self
在主轴上，Flexbox 将我们的内容视为一个组。计算出布局项目所需的总空间，然后剩余空间可用于分配。justify-content 属性控制如何使用剩余空间。将 justify-content: flex-end 设置为，额外空间将放置在项目之前，justify-content: space-around 设置为，额外空间将放置在该尺寸的项目两侧，等等。
这意味着 justify-self 属性在 Flexbox 中没有意义，因为我们始终处理移动整个项目组。
在交叉轴上，align-self 有意义，因为我们可能在 Flex 容器的该尺寸上还有额外的空间，可以在其中将单个项目移动到开头和结尾。
对齐和自动边距
Flexbox 中有一个特定用例，我们可能认为 justify-self 属性是我们需要的，那就是当我们想要分割一组 Flex 项目时，例如创建分割导航模式。对于此用例，我们可以使用 auto 边距。设置为 auto 的边距将吸收其尺寸中的所有可用空间。这是使用自动边距居中块的方式。通过将左右边距设置为 auto，我们的块的两侧都尝试占据所有可用空间，从而将盒子推到中心。
通过在一组都与开头对齐的 Flex 项目中将一个项目的 margin 设置为 auto，我们可以创建一个分割导航。这与 Flexbox 和对齐属性配合得很好。只要没有空间可用于自动边距，该项目就会像所有其他 Flex 项目一样，缩小以尝试适应空间。
gap 属性
在项目之间创建固定大小的间隙
在主轴上，column-gap 属性在相邻项目之间创建固定大小的间隙。
在交叉轴上，row-gap 属性在相邻弹性线之间创建间距，因此 flex-wrap 也必须设置为 wrap，才能使此属性生效。