为何未设置flex-wrap时align-content属性不生效？

align-content的作用是控制flex容器中多行flex项在交叉轴上的对齐方式及间距分配，它的生效前提是：容器内的flex项必须被分成了多行。

而flex容器的默认属性是flex-wrap: nowrap，这个规则会强制所有flex项在同一行显示（哪怕容器空间不足，项也会被压缩甚至溢出容器），此时容器内不存在多行布局，align-content没有可作用的对象，自然看上去像是被忽略了。

当设置flex-wrap: wrap或flex-wrap: wrap-reverse后，flex项在容器空间不足时会自动换行，形成多行布局，这时align-content就可以对这些行的整体对齐、行间距进行控制——比如center会让所有行在交叉轴居中，flex-end会让所有行靠交叉轴末端排列。

不管flex-direction取row/row-reverse/column/column-reverse，这个逻辑都是一致的：只要没有多行，align-content就没有生效的基础。

内容的提问来源于stack exchange，提问作者Ayush Bijalwan