css自动调整盒子大小

可以使用CSS中的flex布局来自动调整盒子大小。具体做法如下：

1. 将父容器的display属性设置为flex。

2. 设置父容器的flex-wrap属性为wrap，这样当子元素的宽度超出父容器的宽度时，子元素会自动换行，并且自动调整大小。

3. 设置子元素的flex属性，来调整子元素在父容器中的分配比例。

例如，下面的代码可以实现一个自动调整大小的盒子：

HTML代码：

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

CSS代码：

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

.box {
  flex: 1 0 calc(25% - 20px);
  margin: 10px;
  background-color: #ccc;
  text-align: center;
  padding: 20px;
}

上述代码中，父容器的display属性设置为flex，flex-wrap属性设置为wrap，子元素的flex属性设置为1 0 calc(25% - 20px)，其中1表示子元素可伸缩，0表示子元素在空间不足时不缩小，calc(25% - 20px)表示子元素在父容器中分配25%的空间，减去20px的margin和padding。这样，当父容器宽度变化时，子元素会自动调整大小，以适应父容器的宽度。