Flex布局中的align-items属性和align-content属性的区别

在学习flex布局中，发现flex容器的属性，align-items和align-content两个属性都是通过交叉轴对齐的方式，看不出区别，后来通过自己尝试的方法，明白了区别。

1、当容器内的元素只有一行时，使用align-items会使这行元素居中。但是使用align-content没有效果。

使用align-items时效果：

使用align-content时的效果：

 

2.在多行的效果下，可以看出，多行下，align-content有效果了，是使所有元素都沿着交叉轴居中。而align-items是使每一行的元素在每一行之中各自居中。

使用align-items的效果：

使用align-content的效果:

 

 

可以发现align-items在单行或者多行元素中都能够生效，而align-content只在多行元素的时候才能生效。