如何实现Div换行后每行数量一致且布局对称？

问题描述 #

我做了一个GPIO控制按钮区域，用Flex布局实现，默认宽度下4个按钮正常排成一行，但缩小浏览器宽度时，最右侧的按钮会单独换行成一行（3+1的布局）。我想要的是换行后每行数量相同、布局对称的效果（比如2+2），试过justify-content: space-around;没达到预期效果。

现有代码 #

CSS代码 #

.interfacessection {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: left;
    }

    .interfaces{
      min-width: 130px;
      min-height: 100px;
      margin: auto;
      display: flex;
      flex-direction: column;
      background-color: rgb(40,40,50);
      border-radius: 17px;
      border-style: solid;
      border-width: 2px;
      border-color: rgb(150,150,160);
    }

    .interfaces div {
      margin: auto;
      align-self: center;
    }

HTML代码 #

<section class="interfacessection">
        <div class="interfaces buttons">
          <div class="description buttons"> GPIO 12</div>
          <div class="slider buttons" > <button  class="ON"  id="12" >ON</button></div>
        </div>
        <div class="interfaces buttons">
          <div class="description buttons"> GPIO 14</div>
          <div class="slider buttons" > <button  class="OFF"  id="14">OFF</button></div>
        </div>
        <div class="interfaces buttons">
          <div class="description buttons"> GPIO 27</div>
          <div class="slider buttons" > <button  class="ON"  id="27">ON</button></div>
        </div>
        <div class="interfaces buttons">
          <div class="description buttons"> GPIO 26</div>
          <div class="slider buttons" ><button class="ON" id="26">ON</button></div>
        </div>
</section>

解决方案 #

核心思路是控制每行固定显示2个元素，结合Flex属性或媒体查询实现对称布局，下面提供两种可行方案：

方案一：纯Flex属性控制（无需媒体查询） #

通过flex-basis设置元素基础宽度，配合flex-wrap实现自动换行成2个一行，同时用gap统一控制间距：

.interfacessection {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* 保证每行元素左右对称 */
  gap: 1rem; /* 替代margin，统一控制元素间的水平/垂直间距 */
}

.interfaces{
  min-width: 130px;
  flex: 0 1 calc(50% - 1rem); /* 基础宽度为容器的50%减去间距的一半，确保一行2个 */
  max-width: 200px; /* 可选，限制元素最大宽度 */
  min-height: 100px;
  margin: 0; /* 去掉原有的margin:auto，避免干扰Flex布局 */
  display: flex;
  flex-direction: column;
  background-color: rgb(40,40,50);
  border-radius: 17px;
  border: 2px solid rgb(150,150,160); /* 简化border写法 */
}

.interfaces div {
  margin: auto;
  align-self: center;
}

方案二：媒体查询+Flex控制（精确适配不同屏幕） #

针对特定宽度断点，强制切换为每行2个元素的布局，适合需要更精确控制的场景：

.interfacessection {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start; /* 修正原属性值错误，left不是合法值 */
  gap: 1rem;
}

.interfaces{
  min-width: 130px;
  flex: 1 1 20%; /* 宽度足够时自动填充，每行最多4个 */
  max-width: 200px;
  min-height: 100px;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: rgb(40,40,50);
  border-radius: 17px;
  border: 2px solid rgb(150,150,160);
}

.interfaces div {
  margin: auto;
  align-self: center;
}

/* 当屏幕宽度小于550px时，切换为每行2个 */
@media (max-width: 550px) {
  .interfacessection {
    justify-content: center;
  }
  .interfaces {
    flex-basis: calc(50% - 0.5rem);
  }
}

原问题原因 #

原来的justify-content: space-around之所以无效，是因为当换行后最后一行只有1个元素时，space-around只会给这个元素左右添加间距，但无法让它和上一行的元素对齐。通过强制每行固定2个元素，就能从根本上解决布局不对称的问题。

内容的提问来源于stack exchange，提问作者Max Tenkleve