需求:元素高度不固定,总数不固定,一行 6 个元素
方案一(×): 使用justify-content: space-between;自动设置列间距的情况
<template>
<div class="ft">
<div class="div-flex">
<div class="item" v-for="i in 5" :key="i"></div>
</div>
</div>
</template>
<script>
export default {
name: "FlexTest",
};
</script>
<style lang="less" scoped>
.div-flex {
width: 430px;
background-color: antiquewhite;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.item {
width: 100px;
height: 100px;
border: 1px solid #000;
box-sizing: border-box;
background-color: aquamarine;
&:nth-child(n + 7) {
margin-top: 10px;
}
}
}
</style>
不作处理的情况下,最后一行是这样的:
如果一行有 6 个元素,就要设置第一行以后的所有行间距(通过:nth-child(n + 7)
设置);
现在处理最后一行的情况:
设置最后一行元素左对齐,而不是平分,有人说让最后一个元素margin-right: auto
就好了,结果如下:
.item{
...
&:last-child {
margin-right: auto;
}
}
列间距没了,既然用了space-between
自动设置列间距,就是不想计算间距手动设置到 item 上,看来加了 margin-right 属性后space-between
在这一行上就失效了,先手动设置一下:
&:last-child {
margin-right: auto;
margin-left: 10px;
}
效果不错,正是期待的结果;但是如果有 n+3 个元素时:
再继续控制就复杂了,放弃使用justify-content: space-between;
,看来这并不是理想的方案。
方案二: 控制每一个 item 的间距
...
<style lang="less" scoped>
.div-flex {
width: 650px;
background-color: antiquewhite;
display: flex;
flex-flow: row wrap;
.item {
width: 100px;
height: 100px;
border: 1px solid #000;
box-sizing: border-box;
background-color: aquamarine;
margin-right: 10px;
&:nth-child(n + 7) { margin-top: 10px; }
&:nth-child(6n) { margin-right: 0; }
}
}
</style>
算是中规中矩的一种方案,没有任何问题,也无特色。(跟浮动的方案差不多了)
另外一种实现需求的方案:用 grid 来实现
...
.div-flex {
width: 650px;
background-color: antiquewhite;
display: grid;
// grid-template-columns: repeat(6, 100px);
// grid-template-columns: repeat(auto-fill, 100px);
grid-template-columns: repeat(6, 1fr);// 三种写法都行
grid-gap: 10px;
.item {
width: 100px;
height: 100px;
border: 1px solid #000;
box-sizing: border-box;
background-color: aquamarine;
}
}
这种方案来实现此需求最简单合适。