css 手机端rem flex布局九宫格 块之间出现白线

Question

 <!-- list 为 [1,2,3,4,5,6,7,8,9] -->
<div class="jigsaw-main">
      <div
        v-for="(item, index) of list"
        :key="index"
        class="jigsaw-single"
      >
      </div>
    </div>




$blockW: 212px;
$blockH: 212px;
.jigsaw-main {
    position: absolute;
    left: 50%;
    margin-left: -318px;
    top: 21%;
    width: $blockW * 3;
    height: $blockH * 3;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    .jigsaw-single {
      width: $blockW;
      height: $blockH;
      // position: absolute;
      background: #000;
      box-sizing: border-box;
      overflow: hidden;
      // transition: all 0.3s ease-in-out; 
    }
}

手机端适配使用的rem postcss-pxtorem

使用flex布局 九宫格 在个别机型下块之间会出现细微的缝隙 导致块里面的内容是图片的话 会比较明显

请问各位大佬们 没有没有什么合适的方案解决

Answer 1

用了flex就不要指定宽高，做成自适应的
我看代码猜你的意思是想要写一个正方形九空格吧，可以看看我写的这个

设置子元素flex: 0 0 33.3333% 这是让三等分
设置子元素paddingTop 33.3333% 这是为了让div始终是正方形
子元素再加一个子元素，绝对定位撑满。然后将要展示的内容放进这里面

https://stackblitz.com/edit/v...