flex属性中align-items和align-content有什么区别

css3语法中flex的align-items和align-content有什么区别？下面编程教程网小编给大家科普一下！

align-items属性

align-items属性可以应用于所有的flex容器，它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式。

.flex {
  display: flex;
  align-items: center;
}

align-content属性

在flex容器指定高度并且子项为多行时，align-content: center是将子项作为一个整体，然后这个整体在flex容器的交叉轴上居中对齐的。

.flex {
  height: 300px;
  display: flex;
  flex-wrap: wrap; 
  align-content: center;
}

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

以上是编程学习网小编为您介绍的“flex属性中align-items和align-content有什么区别”的全面内容，想了解更多关于 前端知识 内容，请继续关注编程基础学习网。