设置固定高度的Flex容器为何在交叉轴留有大量空白？

这个问题的核心是Flex布局中align-content属性的默认行为导致的：

• 10个固定宽高70px的item在开启flex-wrap: wrap后会自动换行，形成若干行，所有行的总高度是「行数 × 70px」，这个总高度远小于设置的容器高度550px，导致容器垂直方向（交叉轴）出现大量剩余空间。
• Flex容器的align-content属性默认值是stretch，它的作用是当容器有多行且交叉轴有剩余空间时，把剩余空间平均分配给每一行，让行的高度被拉伸。由于item高度是固定的70px，行被拉伸后，item上下会出现空白，或者行与行之间的间距被拉大，最终表现为第5个item下方有大量空白。
• 移除容器的height: 550px属性后，容器高度会自动适配所有行的总高度，交叉轴没有剩余空间，align-content: stretch就不会生效，布局也就恢复正常了。

如果要解决这个空白问题，只需把容器的align-content属性改成flex-start、center或者space-between等其他值，剩余空间就不会被分配到各行之间了。

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