当使用flex布局时,很多少时候是固定显示多少列,并且加间距gap;
如以下
一行布局4张图,并且自适应gap的间距,如果过采用 手动计算gap,item的宽度,这也是可以的,但是如果修改了gap又要去修改item的宽度,比较繁琐。
所以采用一下变量的方式去自动计算,每次修改gap后,会自动兼容
<style>
.container{
/* 定义属性并且设置为变量 --gap,--columns */
--gap: 6rpx;
--columns: 4;
display: flex;
width: 100;
flex-wrap: wrap;
/* var 使用变量 */
gap: 2rpx var(--gap);
margin: 30rpx auto 10rpx;
}
.item{
/* 计算宽度 4列25% 每个item减去一个gap,但是实际上间距只有3*gap,把多减去的1个gap分摊给4列加给每列 */
--imgSize:calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
width: var(--imgSize);
/* 根据需要 */
/* height: var(--imgSize); */
}
</style>
<div class="container">
<div class="item"> Item 1 </div>
<div class="item"> Item 2 </div>
<div class="item"> Item 3 </div>
<div class="item"> Item 4 </div>
<div class="item"> Item 5 </div>
<div class="item"> Item 6 </div>
</div>
以上写法只需要理解 --gap ,—columns 这种定义属性并且设置为变量的方式,以及calc、var 的使用方式,遇上类似的动态布局也可以处理。