css 手机端rem与flex布局九宫格：解决块间缝隙问题
在使用css进行手机端适配时，常常会遇到一些棘手的问题。本文将探讨一个常见的难题：在采用rem单位和flex布局实现九宫格布局时，部分手机型号上块元素之间出现细微缝隙的问题。
问题描述如下：开发者使用rem单位和postcss-pxtorem进行手机端适配，并采用flex布局构建九宫格。代码片段如下：
$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;
background: #000;
box-sizing: border-box;
overflow: hidden;
}
}在一些手机设备上，jigsaw-single块元素之间出现了细微的缝隙，尤其当块内内容为图片时，问题更为明显。这影响了九宫格的视觉效果。
针对这个问题，一种有效的解决方法是放弃预先设定子元素的宽高，而是利用flex布局的特性实现自适应布局。 具体来说，可以尝试以下方案：
首先，移除jigsaw-single元素中width和height属性。然后，设置jigsaw-single的flex属性为flex: 0 0 33.3333%，这将使每个子元素占据容器宽度的三分之一。为了确保每个块元素呈现正方形，可以利用paddingtop属性，设置其值为33.3333%。 最后，在每个jigsaw-single元素内部再嵌套一个子元素，使用绝对定位将其撑满父元素，并将实际内容放置在这个内部子元素中。 通过这种方式，可以避免由于浮点数计算精度导致的像素级缝隙问题，从而实现一个完美的九宫格布局。
