解决 flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行的问题

解决flex自动换行属性中间有空行的问题

小黑七零八落

3864人浏览 · 2022-09-21 17:47:23

小黑七零八落 · 2022-09-21 17:47:23 发布

这两天写了一个页面发现 flex布局自动换行属性导致上下两行div中间有空行，下面先说现象。
在这里插入图片描述
这是中间有空行的现象导致整个页面看起来很难受。。。
通过加了一个属性 align-content 就解决啦～

	.someclass {
	   display: flex;
	   justify-content: space-around;
	   flex-wrap: wrap;
	   align-items: flex-start;
	   align-content: flex-start; // 加了我就可以了
	}

在这里插入图片描述

加完了中间的间隙确实消失了，但是如果图片如果不够，会导致错位，解决办法很简单，只要在父div的最后多加几个占位元素就可以啦～看代码

// html
 <div class="full-scroll"> // 父div
    <div class="scroll-img"> // 有图片的盒子
      <img class="imgitem" src="https://.....png" alt="" />
    </div>
    <div class="scroll-img"> // 有图片的盒子
      <img class="imgitem" src="https://.....png" alt="" />
    </div>
    <div class="scroll-img"> // 有图片的盒子
      <img class="imgitem" src="https://.....png" alt="" />
    </div>
    ......
    ......
    <div class="scroll-imgzw"></div> // 占位盒子
    <div class="scroll-imgzw"></div> // 占位盒子
    <div class="scroll-imgzw"></div> // 占位盒子
    <div class="scroll-imgzw"></div> // 占位盒子
    <div class="scroll-imgzw"></div> // 占位盒子
    <div class="scroll-imgzw"></div> // 占位盒子
    <div class="scroll-imgzw"></div> // 占位盒子
    <div class="scroll-imgzw"></div> // 占位盒子
 </div>

// css
.full-scroll {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    overflow-y: scroll;
   	background: #f3f3f3;
    .scroll-img { // 有图片的盒子
      text-align: center;
      width: 9.2857rem;
      height: 13.2857rem;
      margin: 0 1.5rem 1.1429rem; // 设置margin
      background-color: #fff;
      border-radius: 2px;
      border: 1px solid #fff;
      padding-top: 8px;
      .imgitem {
        width: 8.4286rem;
        height: 8.4286rem;
        border-radius: 2px;
      }
    }
    .scroll-imgzw { // 占位盒子 和上面设置一样的属性 但是要隐藏显示（但是还要占位）
      width: 9.2857rem; // 设置宽度
      height: 0;
      visibility: hidden;
      margin: 0 1.5rem 1.1429rem; // 设置margin
    }
  }