css flex布局九宫格

CSS flex布局可以用于创建九宫格的布局。通过设置父容器的display属性为flex，并且使用flex-wrap属性来控制子元素的换行，我们可以创建一个可以自动换行的九宫格布局。

下面是一个示例代码：

HTML:

<div class="flexDiv">
  <div class="flex">1</div>
  <div class="flex">2</div>
  <div class="flex">3</div>
  <div class="flex">4</div>
  <div class="flex">5</div>
  <div class="flex">6</div>
  <div class="flex">7</div>
  <div class="flex">8</div>
  <div class="flex">9</div>
</div>

CSS:

.flexDiv {
  width: 100%;
  display: flex;
  flex-wrap: wrap; /*换行*/
}

.flex {
  width: calc(calc(100% / 3) - 10px);
  margin: 5px;
  height: 200px;
  box-sizing: border-box;
  border: 1px solid #000;
}

.flex:nth-of-type(odd) {
  background: red;
}

这个代码会将父容器.flexDiv分成3列，并且根据子元素的数量自动换行。每个子元素.flex的宽度是根据父容器宽度计算得出的，同时具有相同的高度和边框。奇数位置的子元素会有红色背景。

你可以根据需要修改子元素的样式和数量来实现不同的九宫格布局。