Flex实现九宫格布局

在小程序开发中，对于九宫格布局或者类似九宫格布局算是挺常见，之前写过一个淘宝的小程序，挺多人私信问到关于布局，其实，用flex实现起来挺简单的。下面就来展示下，用Flex布局实现九宫格布局；

<view class="ninth-view">
  <ul class="ninth">
    <li wx:for="{{9-0}}">
      {{index+1}}
    </li>
  </ul>
</view>

.ninth{
  padding:30rpx 30rpx 0 30rpx;
  display:flex;
  align-items:center;
  justify-content: space-between;
  flex-wrap:wrap;
  background: #bbb;
}
.ninth li{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 210rpx;
  height: 210rpx;  
  margin-bottom: 30rpx;
  background:lightblue;
  list-style:none;
}

 这里实现多个方框模块里的水平间距一致的思路是，先给父标签一个padding，然后将一行的方框都设置为两端对齐，模块之间的间隔都相等，即  justify-content: space-between;这里需要计算好，剩下的宽度恰好等于两个间距。

如果需要在里面添加图片和文字，并且水平垂直居中。那就设置每个方框模块都为Flex模式，然后设置多行模块对齐方式为中间对齐，然后给图片一个margin-bottom，这个margin-bottom要等于这个盒子的上边距，就实现了内容的水平垂直居中。