flex实现只有内部边框的九宫格

要实现只有内部边框的九宫格，也可以使用 CSS 的 flex 布局，代码如下：

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 2px solid #000;
  padding: 10px;
}

.grid-item {
  background-color: #ccc;
  height: 100px;
  width: calc(33.33% - 10px);
  margin-bottom: 10px;
  position: relative;
}

.grid-item::before,
.grid-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  z-index: -1;
}

.grid-item::before {
  top: 0;
  left: 0;
}

.grid-item::after {
  bottom: 0;
  right: 0;
}

这里使用了 CSS 的 flex 布局，通过设置 display 属性为 flex 和 justify-content 属性为 space-between 实现了九宫格的效果。同时，通过设置 flex-wrap 属性为 wrap，实现了自动换行，并且通过设置 margin-bottom 属性为 10px 实现了格子之间的间距，通过设置 padding 属性为 10px 实现了九宫格与边框之间的距离。

在每个格子中，使用了伪元素 ::before 和 ::after，通过设置它们的 position 为 absolute 实现了它们与格子的重叠。通过设置它们的 width 和 height 为 100% 实现了它们与格子大小相同，通过设置它们的 border 为 2px solid #000 实现了内部边框的效果，同时，通过设置它们的 z-index 为 -1，将它们放在格子下面，从而实现了只有内部边框的九宫格效果。另外，通过设置格子的 width 为 calc(33.33% - 10px)，实现了每行三个格子的布局。