Flexbox布局定位求助：实现特定排列的按钮布局

核心思路 #

1. 整体用垂直Flex容器包裹上下两个按钮组区域，让它们垂直分布在页面中
2. 每个按钮组区域用水平Flex容器，通过justify-content: space-between实现左右两组按钮分别贴紧屏幕两侧
3. 每侧的6个按钮用垂直Flex容器堆叠，通过gap控制按钮间距

示例代码 #

HTML

<div class="container">
  <!-- 上方按钮组区域 -->
  <div class="button-row">
    <div class="button-group">
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <button>按钮4</button>
      <button>按钮5</button>
      <button>按钮6</button>
    </div>
    <div class="button-group">
      <button>按钮7</button>
      <button>按钮8</button>
      <button>按钮9</button>
      <button>按钮10</button>
      <button>按钮11</button>
      <button>按钮12</button>
    </div>
  </div>

  <!-- 下方按钮组区域 -->
  <div class="button-row">
    <div class="button-group">
      <button>按钮13</button>
      <button>按钮14</button>
      <button>按钮15</button>
      <button>按钮16</button>
      <button>按钮17</button>
      <button>按钮18</button>
    </div>
    <div class="button-group">
      <button>按钮19</button>
      <button>按钮20</button>
      <button>按钮21</button>
      <button>按钮22</button>
      <button>按钮23</button>
      <button>按钮24</button>
    </div>
  </div>
</div>

CSS

/* 外层容器，垂直排列上下两个按钮行 */
.container {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* 上下两个按钮行的间距 */
  padding: 1rem;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 每行按钮容器，水平分布左右两组按钮 */
.button-row {
  display: flex;
  justify-content: space-between;
}

/* 单侧按钮组，垂直堆叠6个按钮 */
.button-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 按钮之间的间距 */
}

/* 按钮样式（可选，按需调整） */
button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 4px;
  background-color: #4285f4;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #3367d6;
}

关键属性说明 #

• flex-direction: column：分别作用于外层容器和按钮组，实现垂直方向的元素排列
• justify-content: space-between：让按钮行内的左右两个按钮组分别对齐屏幕的左右边缘
• gap：统一控制元素间的间距，替代传统的margin写法，布局更简洁可控

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