按钮多行排版

<style>
  .button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .button {
    width: 100px; /* 设置统一的宽度 */
    height: 40px; /* 设置统一的高度 */
    margin: 5px; /* 设置间距 */
  }
</style>

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

<style>
  .button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .button {
    width: calc(33.33% - 10px); /* 每行显示3个按钮 */
    height: 40px;
    margin: 5px;
  }
  @media (max-width: 768px) {
    .button {
      width: calc(50% - 10px); /* 在小屏幕上每行显示2个按钮 */
    }
  }
  @media (max-width: 480px) {
    .button {
      width: 100%; /* 在超小屏幕上每个按钮占一行 */
    }
  }
</style>

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