flex-wrap: wrap 是用于控制 flex 容器中 flex 项目的换行方式。当设置为 wrap 时，表示如果一条轴线排不下所有的flex项目时，项目会换行排列，也就是允许flex项目在必要时换到下一行显示。这与默认的 flex-wrap: nowrap 相反，后者使得所有flex项目都在单行上排列，溢出部分被隐藏。
假设你没有设置父元素的height，正常应该是这样的效果（gap: 12px;）
css
而一旦父元素设置的了height或者flex: 1;(如果父元素的父元素也是flex布局)就会变成这样
css
这是因为flex-wrap;会尽可能的去沾满父元素的高度导致的
解决方法
不写height高度或者flex的值
父元素加上align-content: flex-start;（推荐）
align-content: flex-start; 是CSS中Flex布局的另一个属性，用于调整多行（当flex-wrap不是nowrap时）flex容器中各行之间的对齐方式。当设置为 flex-start 时，它具有以下效果：
多行flex项目将会紧靠容器的起始边（通常是上边或左邊，取决于书写模式）对齐，不留额外的空间在各行之间。
这个属性主要影响的是flex容器里有多余空间的情况，即flex项目无法填满整个容器高度（垂直方向上的多行）或宽度（水平方向上的多行）时，各行之间的空间分配。
需要注意的是，align-content 属性只在有多行的情况下生效（即当flex-wrap设置为wrap、wrap-reverse时）。如果flex容器内的项目只有一行（默认的flex-wrap: nowrap），这个属性不会有任何视觉效果，因为没有行间空间可以调整。
