结论 :
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 是完全两侧分布对齐 不留任何空隙