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

align-items:

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

　　align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

aligin-conten:

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

作用:

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

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

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

比如：

如果child-1的width设置为100px，child-2的width设置为30px,这样child-2会排列在一行上

 

原文地址：https://www.cnblogs.com/-ting/p/11783960.html