justify-content、align-content、align-items、align-self的区别

提示：
CSS flex-direction属性指定了内部元素是如何在 flex 容器中布局的,定义了主轴的方向(正方向或反方向)，默认主轴为正方向。
侧轴：与主轴垂直的轴叫侧轴。
justify：使齐行
align：排列，使成一条直线
wrap：包裹
flex：弯曲

1.justify-content: center;
用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

总结：主轴居中对齐

2.align-items: center;
定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
多个子标签

总结：侧轴居中对齐,所有子标签都放在一行
经常和justify-content:center;一起使用，水平垂直居中。

3.align-self:center;
定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
总结：设置在子标签上，侧轴中心对齐

4.align-content: center;
align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。（看不懂？是哪个轴方向都有空白吗）

总结：需要加flex-wrap:wrap;，侧轴居中对齐
不加flex-wrap:wrap; align-content不起作用
参数，对剩余空间分配：
space-between：贴边，中间相等

space-around：边一半，中间相等
本人初学者，欢迎批评指正。
这些都是菜鸟上的，只是整理了一下。https://www.runoob.com/