CSS flex布局设置gap时的宽度自适应以及cale、var、--变量的使用

当使用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 的使用方式，遇上类似的动态布局也可以处理。