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

当flex container内flex items只有一行时

align-content与align-items相同的属性值产生的效果一样；

align-content的space-between与flex-start效果相同，space-around与center效果相同。

当flex container内flex items有多行时

align-items

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

如下图，一共有两列小盒子，flex container的空间被平均分成两半给这两列。
设置align-items : flex-end; 两列小盒子会贴近flex container分隔的两列空间的交叉轴的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属性应用于flex container中的多行/列flex元素。

将多行/列flex元素的内容作为一个整体，设置其在flex container整个空间内 在交叉轴上的对齐方式。

如下图，两列小盒子作为内容的整体在交叉轴的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; 为高优先级。

 

 

 

 

container