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

.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

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐