---
title: "[Vue 原生JS] flex布局最后一行元素左对齐"
id: "3237"
type: "post"
slug: "vue-%e5%8e%9f%e7%94%9fjs-flex%e5%b8%83%e5%b1%80%e6%9c%80%e5%90%8e%e4%b8%80%e8%a1%8c%e5%85%83%e7%b4%a0%e5%b7%a6%e5%af%b9%e9%bd%90"
published_at: "2021-10-06T20:53:53+00:00"
modified_at: "2021-10-06T20:53:53+00:00"
url: "https://seq.ink/all/3237.html"
markdown_url: "https://seq.ink/all/3237.html.md"
excerpt: "在开发过程中使用flex布局经常会遇到最后一行不满足个数导致布局混乱的问题如下： 可以看到因为使用了 justify-content: space-between; 确实实现了平均分配但是最后一行我们希望他靠左对齐并且还拥有间距这时怎么办？ ..."
taxonomy_category:
  - "ALL"
---

在开发过程中使用flex布局经常会遇到最后一行不满足个数导致布局混乱的问题如下：  
   
 [https://hk-mkaliez-oss.oss-cn-hongkong.aliyuncs.com/uploads/2021/10/carbon.png](https://hk-mkaliez-oss.oss-cn-hongkong.aliyuncs.com/uploads/2021/10/carbon.png)
  
 可以看到因为使用了 justify-content: space-between; 确实实现了平均分配但是最后一行我们希望他靠左对齐并且还拥有间距这时怎么办？  
 这里我们可以计算出差多少能填满该行，以达到效果。  
 具体算法如下：  
 列数减去(数据长度)余列数 即：col-(serveData.length)%col  
 演算一下，假设服务端有18条数据 前端dom结构5列1行即：  
 5-18= -13  
 -13%5= 2  
 至此我们计算出了还差多少元素填满，我们使用vue的话可以直接新增一个循环，向后追加空元素。  
 我们还需考虑到服务器返回的数据正好满足前端列数的填充终止追加。

```
<li style="background: none" v-for="(item,index) in 5-(serveData.length)%5" :key="index" v-if="(serveData.length)%5 > 0"></li>
```

[https://hk-mkaliez-oss.oss-cn-hongkong.aliyuncs.com/uploads/2021/10/carbon-2.png](https://hk-mkaliez-oss.oss-cn-hongkong.aliyuncs.com/uploads/2021/10/carbon-2.png)
  
 按照这个思路原生js代码如下：  
 [https://hk-mkaliez-oss.oss-cn-hongkong.aliyuncs.com/uploads/2021/10/carbon-3.png](https://hk-mkaliez-oss.oss-cn-hongkong.aliyuncs.com/uploads/2021/10/carbon-3.png)
  
 其实更好的解决方案是使用grid布局，因为不会产生额外的dom。

但是在微信小程序中或者uniapp对都卿点flex布局，所以还是需要掌握。

不想要额外的dom结构并且还使用flex可以自己按照上面的思路封装一个方法，取出最后一排元素不进行flex布局，改为传统的内联块配合边距。