使用flex布局中的justify-content:space-between，导致最后一行无法左对齐（自适应）

目录

问题叙述

 解决思路

 代码贴出（带备注）

html部分

js部分

css部分

---

问题叙述

今天开发中遇到了一个布局问题，本想只使用css解决这个问题，不想牵扯js。后来发现研究了一阵子还是不行。于是自己手写了下js,以下使用vue3。逻辑都一样的其实，大家可以参考下。

 解决思路

  实时判断父div的宽度，

  使用父div宽度/子div宽度=一行有多少列。

  再使用数组长度%一行多少列=取余数

  再使用一行有多少列-取余数=填充数

  最后使用v-for 填充span 进去既解决

以下为效果图：

 代码贴出（带备注）

html部分

 <!-- 数据信息 -->
  <div class="dataBox" ref="dataBoxRef">
       <div class="parameter" v-for="(item,index) in equipmentData" :key="index"></div>
        <span v-for="(item,index) in spanNum" ></span>
   </div>

js部分

<script setup> 
 import { ref,onMounted,watch,onBeforeMount } from 'vue'
 const dataBoxRef =ref(null)
 const spanNum=ref([])

onMounted(()=>{                                   
     fillerMethod(dataBoxRef.value.clientWidth)
     window.onresize = () => {                           //实时监听页面宽度是否变化
      return (() => {
        fillerMethod(dataBoxRef.value.clientWidth)
      })();
     }

})
//获取填充数的方法
const fillerMethod=(widthData)=>{
     //拿到dataBox的div实时宽度/子div宽度（282px）=行中子div数量
      let columnNum=Math.floor(widthData/282) 
      let remainder=equipmentData.value.length%columnNum  //数组长度%子div数量=取余数量
      let fillerNum=columnNum-remainder                   //行中子div数量-取余数量=填充数量
      let arr=[]
      for(let i=0;i<fillerNum;i++){                       //填充数量遍历 组合为数组
          arr.push(i)
      }
      spanNum.value=arr                                   //赋值
}
</script>

css部分

// 数据信息 
.dataBox{
   border: 1px solid rgb(0, 162, 255);
   width: 100%;
   height: 85%;
   margin-top: 1.5%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-content: flex-start;
   overflow:auto;
   .parameter{
     width: 282px;
     height: 205px;
     // border: 1px solid red;
     background: url('../../../assets/images/NX/blueBox.png') no-repeat;
     background-size: 100% 100%;
     margin-bottom: 35px;
   }
   span {
     border: 1px solid red;
     width: 282px;
     height: 205px;
   }
}

代码中还有优化的空间，大家也可以自行优化。