align-items和align-content区别详解

目录

一、子项为单行时

1.1 flex盒子不设置高度时

1.2 flex盒子设置高度时

二、子项为多行时

2.1 flex盒子没有高度时

2.2 flex盒子设置高度时

三、拓展

四、总结

---

一、子项为单行时

1.1 flex盒子不设置高度时

初始状态如下

---

flex盒子添加align-items: center时，结果如下

 结果：可以看到每个每个子元素都居中显示

---

flex盒子添加align-content: center时，结果如下

 结果：和初始状态没有区别，代码不生效（因为没有高度，该行元素的高度和flex盒子内容高度一样，所以居中显示不会有效果）

---

1.2 flex盒子设置高度时

初始状态如下

---

flex盒子添加align-items: center时，结果如下

 结果：每个元素都相对于flex盒子居中对齐了

---

flex盒子添加align-content: center时，结果如下

 结果：该行元素作为一个整体，这个整体相对于整个flex盒子居中对齐了

---

二、子项为多行时

2.1 flex盒子没有高度时

初始状态如下

---

flex盒子添加align-items: center时，结果如下

 结果：每一个子元素都在所在行内居中显示

---

flex盒子添加align-content: center时，结果如下

 结果：和初始状态没有区别，代码不生效（因为没有高度，这两行元素加起来的高度和flex盒子内容高度一样，所以居中显示不会有效果）

---

2.2 flex盒子设置高度时

初始状态如下

---

 flex盒子添加align-items: center时，结果如下

 结果：如图所示，每一个子元素在其所在的行内居中显示，且每一行元素均分整个flex盒子

---

flex盒子添加align-content: center时，结果如下

 结果：所有子元素所组成的一个整体，这个整体在flex盒子内居中显示

---

三、拓展

当子项为单行，flex盒子有高度时，我们添加align-content: center属性不生效

此时我们可以添加一行代码 flex-wrap: wrap 就可以生效了，结果如下

 结果：该行元素组成一个整体，这个整体在整个flex盒子内居中显示

---

四、总结

条件		属性（是否有效果）
子项	flex容器	align-items: center	align-content: center
单行	不指定高度	是	否
	指定高度	是	否（设置flex-wrap: wrap时，有效果）
多行	不指定高度	是	否
	指定高度	是	是