flex布局交叉轴方向对齐方式详解

今天重新研究了一下flex布局发现了一个一直没有理解透而忽略的问题~

align-content属性和align-items属性的作用和区别？

之前学flex布局时看的是阮一峰大神的博客感觉很不错，今天回过头来研究我发现对于align-content属性和align-items属性作用的解释并不是很清楚（可能是我理解能力太差吧）不过没关系，通过查资料和实践最终领悟了~

先看大神的解释:(直接截图啦

让我最开始懵逼的原因就是两个属性的属性值都和交叉轴的对齐方式有关，然后我就傻傻的分不清了。。。

于是有了以下代码为了看效果图我还是上截图：

看上图下部中间样式表可知我设置了justify-content（主轴方向对齐方式）属性为居中，尚未设置align-items属性（默认为flex-start）和align-content属性，为突出效果设置前三个盒子不同的高。

由最右边的小图可知我给四个小盒子设置了右外边距和下外边距为10px，在图中1/2/3盒子的右边距显示为10px，而盒子4与上面三个盒子的外边距明显不为10px，这是由于flex布局交叉轴方向容器内部 空白空间弹性分配造成的。。

下面我们设置一下align-items: flex-end;再看效果图：

可以明显的发现在交叉轴方向盒子像设置的一样向轴末端对齐了，而且处于同一行不同高度的三个盒子在行内的对齐方式变为了盒子底端对齐。两行盒子间仍然没有像预期设置的下边距一样10px。

下面我们加上align-content：center属性：

可以看出四个盒子都处于了容器的中间变为了交叉轴方向juzhong对齐。两行盒子的间距也都变为了10px；

由此过程可以看出：

align-items属性在没有设置align-content属性时控制的是交叉轴方向的对齐方式以及沿主轴每一行元素在此行的对齐方式。

align-content属性是实际上是辅助align-items属性在容器内各元素没有占用空白可用空间时，控制交叉轴方向沿主轴每一行的对齐方式

再补一张图：