现在的需求是父盒子的宽度会变化，如何让子盒子均匀排列，间隙相同

当父盒子的宽度发生改变，而仍需让子盒子均匀排列并保持间隙一致，你可以使用以下CSS策略：

1. **设置容器宽度**：首先，为父容器设置一个百分比宽度，使其能够随着屏幕尺寸变化，如`width: 100%;`。这会让父容器自适应其容器或父级元素的宽度。

2. **Flexbox布局**：在父容器上使用`display: flex;`和`flex-wrap: wrap;`，这样子元素会在需要时换行。

3. **响应式`justify-content`**：使用`justify-content: space-between;`或者`justify-content: space-around;`，它们会保证子元素在一行内均匀分布，同时在每行间留出相同的间隔。如果宽度允许，这两个选项都会保证间隔固定。

4. **设置`gap`**：引入`gap`属性（CSS3及以上版本），用于设定行间和列间的间隔，比如`gap: 10px;`。

5. **媒体查询**：如果你希望在特定设备尺寸下有不同的行为，可以使用媒体查询(`@media`)来针对不同视口调整布局。

示例代码：

.parent-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

/* 如果需要针对小屏幕调整，可以加上下面的媒体查询 */
@media (max-width: 768px) {
  .parent-container {
    justify-content: flex-start;
    gap: 5px;
  }
}

在这个例子中，如果屏幕宽度小于或等于768px，子盒子将从左到右开始排列，且间距减半。