css问题：display:flex布局+justify-content: space-between； 最后一行不能左对齐
解决方法1： display: flex;+margin: 10px var(--leftRight);
--leftRight： 动态计算一行减去item的宽度后剩下的间距
解决方法2：网格布局 display: grid;grid-template-columns: repeat(5, 1fr);+margin: 10px auto;
完整代码：
<template>
<div class="flex">
<h1>问题：flex布局+justify-content: space-between; 最后一行不能左对齐</h1>
<div class="box">
<div class="box_item" v-for="(v, i) in list" :key="i"></div>
</div>
<h1>方法1：display: flex;+margin: 10px var(--leftRight);</h1>
<div class="box1">
<div class="box1_item" v-for="(v, i) in list" :key="i"></div>
</div>
<h1>方法2：网格布局 display: grid;grid-template-columns: repeat(5, 1fr);+margin: 10px auto;</h1>
<div class="box2">
<div class="box2_item" v-for="(v, i) in list" :key="i"></div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
list: 12
}
},
mounted () { },
methods: {},
}
</script>
<style lang="scss" scoped>
.flex {
width: 100%;
height: calc(100vh - 90px);
padding: 5px;
h1 {
padding-left: 10px;
}
.box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding-top: 20px;
.box_item {
width: 50px;
height: 50px;
background-color: blue;
border: solid 1px #000;
box-sizing: border-box;
--n: 5;
/* 一行几个 */
--space: calc(100% - var(--n) * 50px);
/* 一行减去item的宽度后剩下的间距 */
--leftRight: calc(var(--space) / var(--n) / 2);
/* 每个item左右的间距 */
margin: 10px var(--leftRight);
}
}
.box1 {
display: flex;
flex-wrap: wrap;
width: 100%;
padding-top: 20px;
.box1_item {
width: 50px;
height: 50px;
background-color: blue;
border: solid 1px #000;
box-sizing: border-box;
--n: 5;
/* 一行几个 */
--space: calc(100% - var(--n) * 50px);
/* 一行减去item的宽度后剩下的间距 */
--leftRight: calc(var(--space) / var(--n) / 2);
/* 每个item左右的间距 */
margin: 10px var(--leftRight);
}
}
.box2 {
display: grid;
grid-template-columns: repeat(5, 1fr);
width: 100%;
padding-top: 20px;
.box2_item {
width: 50px;
height: 50px;
background-color: blue;
border: solid 1px #000;
box-sizing: border-box;
margin: 10px auto;
}
}
}</style>