Flex布局下图标异常出现额外高度、撑满容器剩余空间如何解决

你为#playlist flex容器设置flex-wrap: wrap开启换行后，没有显式设置交叉轴对齐属性，flex容器默认的align-items属性值为stretch，会让每一行的flex子项（也就是.icons图标容器）在垂直交叉轴方向拉伸，占满所在行的全部高度。你的场景下8个图标会自动排成2行，两行元素会平分500px的容器垂直空间，最终出现图标占据所有剩余高度、出现不符合预期的额外高度的现象。

只需要给#playlist容器添加align-items: flex-start即可，让图标在交叉轴方向按自身高度顶部对齐，不会被强制拉伸，同时保留原有水平两端对齐、自动换行的效果。
修改后的#playlist样式代码：

#playlist {
  height: 500px;
  width: 500px;
  background-color: aquamarine;
  margin: 80px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start; /* 新增该行解决拉伸问题 */
}

如果你需要调整多行图标在垂直方向的分布，可以额外设置align-content属性：

• 设置align-content: flex-start：所有行整体靠容器顶部排列
• 设置align-content: space-between：多行在容器垂直方向两端对齐，剩余空间均匀分布在行之间
• 设置align-content: center：所有行整体在容器垂直方向居中排列

知识点提示：flex布局中，align-items控制单行内子项的交叉轴对齐规则，align-content控制开启换行后多行元素整体的交叉轴分布规则，两者默认值均为stretch，只要显式设置为非stretch值，就可以避免子项被强制拉伸占满容器高度的问题。

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