关于flex布局和九宫格布局的实现

以下是一个使用Flexbox布局实现九宫格的简单示例：

HTML:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

CSS:

.grid-container {
  display: flex;
  flex-wrap: wrap;
  width: 200px; /* 定义容器宽度 */
}
 
.grid-item {
  flex: 1;
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  width: calc(100% / 3); /* 每个格子占据三分一的宽度 */
}

这段代码创建了一个包含九个子元素的容器，每个子元素都通过Flexbox布局均匀分布在父容器中，模拟了九宫格的效果。每个格子的宽度被设置为父容器宽度的三分一。