問題：換行后，行間出現(xiàn)空白間隔，如果沒有設(shè)置父容器的高度，不會出現(xiàn)這個問題，父容器高度會隨子項增多，而變大。

.content {height: 8rem;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;.item {width: 125px;height:200px;}
}

解決：父容器添加 align-content: flex-start;

說明：
align-content是Flex布局中用于控制多行子項在交叉軸上的對齊方式的屬性。它僅在有多行子項時才會生效，如果子項只有一行，則align-content屬性不會產(chǎn)生任何效果。（生效條件：display:flex;flex-direction:row;flex-wrap:wrap;）

常見的 align-content 取值包括：

flex-start：多行子項在交叉軸的起始端對齊。
flex-end：多行子項在交叉軸的末端對齊。
center：多行子項在交叉軸上居中對齊。
space-between：多行子項均勻分布在交叉軸上，兩端無空隙。
space-around：多行子項均勻分布在交叉軸上，兩端留有空隙。
**stretch：多行子項被拉伸以填滿交叉軸上的可用空間。默認(rèn)**

補充：

align-self 是Flex布局中用于單個子項控制其在交叉軸上的對齊方式的屬性。通過為單個子項設(shè)置 align-self 屬性，可以覆蓋容器的 align-items 屬性，從而針對該子項進(jìn)行個別的對齊方式設(shè)置。

align-self 的取值與 align-items 的取值類似，常見的取值有：

auto：子項的對齊方式將繼承容器的 align-items 屬性。
flex-start：子項在交叉軸的起始端對齊。
flex-end：子項在交叉軸的末端對齊。
center：子項在交叉軸上居中對齊。
baseline：子項基于基線對齊。
stretch：子項被拉伸以填滿交叉軸的高度。

問題解決過程中主要參考了
https://blog.csdn.net/caseywei/article/details/109075874