flex：align-items和align-content的区别

属性值

align-items的属性值有：baseline、center、flex-end、flex-start、stretch、inherit、initial、unset

align-content的属性值 比align-items多了两个：space-around、space-between

align-items

align-items属性应用于flexbox中的单行/列的flex元素。

如下图，一共有两列小盒子，flex父容器的空间被平均分成两半给这两列。
设置align-items : flex-end; 两列小盒子会贴近flex父元素分隔的两列空间的交叉轴的end。

#father {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            background-color: white;
            border: 1px black solid;
            height: 500px;
            width: 100%;
            justify-content:center;
            align-items: flex-end;
            /* align-content:flex-end; */
        }

　　

align-content

align-content属性应用于flexbox中的多行/列flex元素，将flexbox容器空间作为一个整体，设置多行/列flex元素在交叉轴上的对齐方式。

如下图，两列小盒子作为内容的整体在交叉轴的end对齐。

#father {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            background-color: white;
            border: 1px black solid;
            height: 500px;
            width: 100%;
            justify-content:center;
            /* align-items:flex-end; */
            align-content:flex-end;
        }

　　

注意

如果同时设置了 align-content:flex-end; 和 align-items:flex-end; 浏览器以 align-content:flex-end; 为高优先级。