如何让一个div扩大时,将相邻的几个div推开

可以使用CSS的`flexbox`布局来实现该效果。将这些相邻的`div`元素包裹在一个父级`div`中，然后给父级`div`设置`display: flex`属性，再给每个子元素设置`flex-grow: 1`，表示每个子元素可以平均地占据父元素的剩余空间，当其中一个子元素扩大时，其他子元素会自动被压缩，并且它们之间的距离也会随之调整，从而保证它们不会重叠。下面是一个示例代码：

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

.container {
  display: flex;
}

.box {
  flex-grow: 1;
  height: 50px;
  margin: 5px;
}

当其中一个`box`元素宽度增加时，其他元素会被挤压，从而保证它们之间不会重叠。