如何在更改按钮大小后重新排列按钮之间的间距？

<div class="button-container">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<style>
.button-container {
  display: flex;
  justify-content: space-between; /* 水平间距 */
  align-items: center; /* 垂直间距 */
}

.button-container button {
  /* 设置按钮样式和大小 */
}
</style>

<div class="button-container">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<style>
.button-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 水平间距 */
  grid-gap: 10px; /* 垂直间距 */
}

.button-container button {
  /* 设置按钮样式和大小 */
}
</style>

<div class="button-container">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<style>
.button-container {
  position: relative;
}

.button-container button {
  margin-right: 10px; /* 水平间距 */
  margin-bottom: 10px; /* 垂直间距 */
}

.button-container button:last-child {
  margin-right: 0; /* 最后一个按钮的右边距为0 */
  margin-bottom: 0; /* 最后一个按钮的下边距为0 */
}
</style>