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

结论 :

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

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

解析如下:

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

align-content 和 align-items 区别是什么 使用场景_第1张图片

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

 align-content 和 align-items 区别是什么 使用场景_第2张图片

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

align-content 和 align-items 区别是什么 使用场景_第3张图片

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

​​​​​align-content 和 align-items 区别是什么 使用场景_第4张图片

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

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

 align-content 和 align-items 区别是什么 使用场景_第5张图片

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

   那么到这里有人要问了    :

align-content: space-around 

align-content: space-between   区别是什么呢  

  这里说一下, 

align-content: space-around 是两侧预留一部分 然后分布对齐 

align-content: space-between 是完全两侧分布对齐 不留任何空隙

 align-content 和 align-items 区别是什么 使用场景_第6张图片

你可能感兴趣的:(html,前端)