网站建设氺金手指排名15建筑企业网

问题：换行后，行间出现空白间隔，如果没有设置父容器的高度，不会出现这个问题，父容器高度会随子项增多，而变大。

.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属性不会产生任何效果。（生效条件：display:flex;flex-direction:row;flex-wrap:wrap;）

常见的 align-content 取值包括：

flex-start：多行子项在交叉轴的起始端对齐。
flex-end：多行子项在交叉轴的末端对齐。
center：多行子项在交叉轴上居中对齐。
space-between：多行子项均匀分布在交叉轴上，两端无空隙。
space-around：多行子项均匀分布在交叉轴上，两端留有空隙。
**stretch：多行子项被拉伸以填满交叉轴上的可用空间。默认**

补充：

align-self 是Flex布局中用于单个子项控制其在交叉轴上的对齐方式的属性。通过为单个子项设置 align-self 属性，可以覆盖容器的 align-items 属性，从而针对该子项进行个别的对齐方式设置。

align-self 的取值与 align-items 的取值类似，常见的取值有：

auto：子项的对齐方式将继承容器的 align-items 属性。
flex-start：子项在交叉轴的起始端对齐。
flex-end：子项在交叉轴的末端对齐。
center：子项在交叉轴上居中对齐。
baseline：子项基于基线对齐。
stretch：子项被拉伸以填满交叉轴的高度。

问题解决过程中主要参考了
https://blog.csdn.net/caseywei/article/details/109075874