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;时,有效果) | |
多行 | 不指定高度 | 是 | 否 |
固定高度 | 是 | 是 |