align-content

多个交叉轴的对齐方式

大白话就是涉及到换行内容 align-content才会有效果 我们知道按照flex的默认属性 如果不设置 flex-wrap 为 wrap属性的话 flex容器里面的元素是不会换行的 如果元素太多 他只会收缩 那么就不会出现多个交叉轴 align-content就会没有一点效果

反之 align-content产生效果

• align-item 是控制元素在行上的排列
• align-content 是控制行在交差轴上的排列

属性和align-item是一样的

需要注意的是 由于默认值是 stretch 那么交叉轴会平分容器高度 如果子项也没有设置高度 那么子项的高度就是交叉轴的高度

我好像明白了为什么一设置 flex-wrap 为 wrap 第一行和第二行的容器老是隔那么远 也不默认挨在一起