flex布局一行三个div，宽度平分，如果有第四个div则换行显示，以此类推

您可以使用flex布局的方式来实现一行三个div，宽度平分的效果，并且当有第四个div时自动换行。示例代码如下：

HTML代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex-basis: calc(33.33% - 10px);
  margin-right: 10px;
  height: 100px;
  background-color: #ccc;
  margin-bottom: 10px;
}

.box:last-child {
  margin-right: 0;
}

@media (max-width: 960px) {
  .box {
    flex-basis: calc(50% - 10px);
  }
}

解释说明：

- 使用flex布局，container为父容器，box为子元素。
- 设置box的flex-basis为33.33%，即平分父容器的宽度，同时为了避免box之间的间距，设置margin-right: 10px。
- 当最后一个box时，将margin-right设置为0，以避免出现多余的空隙。
- 使用@media查询，当屏幕宽度小于960px时，将box的flex-basis设置为50%。

这样，当有第四个div时，会自动换行显示，以此类推。