align-content 和 align-items 区别是什么 使用场景

结论 ：

1： 共同点：它们对齐方向为交叉轴

2：不点：align-content 应用于为 多行   而 align-items:应用于同单行。

解析如下：

1.设置四个盒子 大盒子设置flex

2.设置 align-items: center;   - ----- 发现居中对齐了

 3.align-items: flex-end;  ----- 可以看到 尾部对齐了

 4. align-content: space-around ----- 在这个时候我们去修改 发现并没有效果  

5.当我们去添加一个  flex-wrap: wrap; 的时候 发现 分布对齐了

   是因为align-content: 属性是基于多行去做的   flex-wrap: wrap 是变成多行的重要前提

6. 我们继续修改  align-content: space-between 发现 靠近顶部和底部分布对齐了 

   那么到这里有人要问了    :

align-content: space-around 
 
align-content: space-between   区别是什么呢  
 
  这里说一下， 
 
align-content: space-around 是两侧预留一部分 然后分布对齐 
 
align-content: space-between 是完全两侧分布对齐 不留任何空隙