flex布局一行4个盒子，做九宫格布局

在Flex布局中创建一行四个盒子的九宫格布局，你可以通过设置容器`display: flex;`属性，并结合`flex-wrap: wrap;`来允许元素换行，以及一些基本的网格计算来实现。这里是一个简单的步骤：

1. 设置容器样式：

   .container {
     display: flex;
     flex-wrap: wrap; /* 允许元素换行 */
     justify-content: space-between; /* 控制项目之间的间隔，这里为了美观 */
   }

2. 定义每个小格子（假设宽度已知，比如宽度都是100px）：

   .box {
     width: calc(25% - 2px); /* 计算25%宽度减去左右外边距，确保间距 */
     margin-bottom: 10px; /* 可选，给盒子底部留点空间 */
     box-sizing: border-box; /* 确保内边距和边框不会增加总宽度 */
   }

3. 将4个盒子放入容器：

   <div class="container">
     <div class="box">盒一</div>
     <div class="box">盒二</div>
     <div class="box">盒三</div>
     <div class="box">盒四</div>
     <!-- ...如果有更多格子 -->
   </div>