解决space-between布局的问题以及多⾏div⾃动对齐的问题在开发项⽬的时候遇到了以下⼏点需要解决的问题条件：
1.⼦元素个数不固定
2.⽗元素宽度不固定
3.⼦元素⾃动换⾏，并且⾃动撑满⼀⾏，但是并不改变⼦元素的宽度（即元素从最左分布到最右边，注：忽略padding和margin）
先来效果图（请忽略打码）：
在解决的时候就想到了使⽤flex布局中的justify-content属性的space-between，但是当我应⽤上去的时候发现问题并没有得到解决，效果如下图：
可以看到当元素不够填满⼀⾏的时候，space-between会将剩余的空隙平均分成元素个数x - 1份然后进⾏布局，并不是我们想象中的从左到右排列。
解决的思路：如果⼦元素个数不够填满⼀⾏，则在该⾏的末尾添加缺少元素个数的空块进⾏填充即可，代码如下（基于vue）：
计算⽅法如下(300为⼦元素的宽度，也可⾃适应宽度)：
/
/ 解决space-between布局的问题，添加div填充空位
reCalcPaddingLength () {
let outerLength = this.$refs.listContainer.clientWidth // 外⾯div的宽度
let listLen = 6 // ⼦元素总个数，⾃⼰调整即可
let lineCapacity = Math.floor(outerLength / 300)
this.paddingLength = listLen % lineCapacity === 0 ? 0 : (lineCapacity - listLen % lineCapacity)
}
调⽤该⽅法（需要特别注意的是当页⾯⼤⼩重置的时候，需要重新计算进⾏填充）：
mounted: function () {
let self = this
}
}
页⾯js代码：
export default {
data () {
return {
paddingLength: 0
}
},
mounted: function () {
let self = this
}
},
methods: {
// 解决space-between布局的问题，添加div填充空位
reCalcPaddingLength () {
let outerLength = this.$refs.listContainer.clientWidth // 外⾯div的宽度
let listLen = 6 // ⼦元素个数，⾃⾏调整
let lineCapacity = Math.floor(outerLength / 300) // 计算每⼀⾏的容量
this.paddingLength = listLen % lineCapacity === 0 ? 0 : (lineCapacity - listLen % lineCapacity) // 得出需要添加的空块    }
}
}
HTML代码：
flex布局对齐方式
<div class="kg-list-container" ref="listContainer">
<div v-for="item in 6" class="list-item">
<p class="kg-background"></p>
<p class="item-title">title</p>
</div>
<div v-for="item in paddingLength" class="list-item">
</div>
</div>
CSS代码：
.kg-list-container {
margin-top: 20px;
display: flex;
justify-content: space-between;    flex-wrap: wrap;
}
.list-item {
margin: 0px 0px 40px 0px;
width: 300px;
height: 220px;
border: solid 1px inherit;
border-radius: 10px;
overflow:hidden;
}
.kg-background {
background: black;
height: 180px;
margin: 0px;
}
.
list-item {
width: 300px;
height: 220px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。