align-conten和align-items之间的区别

align-items:

作用: align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。

属性 :
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

效果如下所示：

aligin-conten:

align-content属性只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐。

作用:会设置自由盒内部所有行作为一个整体在垂直方向排列方式。针对多行作为一个整体在纵轴上的排列方式，该属性对单行无效。

条件:
必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

属性 :
　　　flex-start：左对齐
　　　flex-end：右对齐
　　　center：居中对齐
　　　space- between：两端对齐
　　　space-around：沿轴线均匀分布
　　　stretch： 默认值。各行将根据其flex-grow值伸展以充分占据剩余空间。会拉伸容器内每行占用的空间，填充方式为给每行下方增加空白

效果如下所示：

区别

结论：从上表可知，对于align-items和align-content的区别，我们只需要记住以下两点，

1,align-items属性是针对单独的每一个flex子项起作用，它的基本单位是每一个子项，在所有情况下都有效果（当然要看具体的属性值）。
2,align-content属性是将flex子项作为一个整体起作用，它的基本单位是子项构成的行，只在两种情况下有效果：①子项多行且flex容器高度固定 ②子项单行，flex容器高度固定且设置了flex-wrap:wrap;