flex实现9宫格布局

Flex布局本身不支持9宫格布局，但可以通过将布局容器分为3行3列，每个格子使用flex-item来占据，然后再通过设置flex item的宽高、margin、padding等属性实现9宫格布局。

下面是一个示例代码：

HTML代码：

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  background-color: #f8f8f8;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.item1, .item2, .item3 {
  height: 100px;
}

.item4, .item5, .item6 {
  height: 100px;
}

.item7, .item8, .item9 {
  height: 100px;
}

.item1, .item4, .item7 {
  width: 100px;
}

.item2, .item5, .item8 {
  width: 100px;
}

.item3, .item6, .item9 {
  width: 100px;
}

.item1 {
  background-color: #e8e8e8;
}

.item2 {
  background-color: #d8d8d8;
}

.item3 {
  background-color: #c8c8c8;
}

.item4 {
  background-color: #b8b8b8;
}

.item5 {
  background-color: #a8a8a8;
}

.item6 {
  background-color: #989898;
}

.item7 {
  background-color: #888888;
}

.item8 {
  background-color: #787878;
}

.item9 {
  background-color: #686868;
}

在这个示例代码中，容器被分成3行3列，每个格子使用flex item占据，然后通过设置每个item的宽高和背景颜色，实现9宫格布局的效果。