如何用CSS Flexbox实现无空隙排列尽可能多的Div元素

需求 #

通过CSS Flexbox实现.rack元素尽可能多地排列，且容器内无空隙，同时左上角保留colocation name标签。

现有HTML代码 #

<div class="colocation">
  <span>colocation name</span>
  <div class="rack"><span style="text-align: center;">rack name</span>
    <div class="vstack">
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-info btn-sm">X</button>
    </div>
  </div>
  <div class="rack"><span style="text-align: center;">rack name</span>
    <div class="vstack">
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-dark btn-sm">X</button>
      <button type="button" class="btn btn-info btn-sm">X</button>
    </div>
  </div>
</div>

尝试的SCSS代码 #

.colocation {
  border: 1px solid blue;
  flex-wrap: wrap;
  display: flex;
  max-width: 50rem;
  flex: 1;
  align-items: flex-start;

  span {
    color: blue;
  }
}

.rack {
  border: 1px solid red;
  width: 5rem;
  flex: 1;

  span {
    color: red;
  }
}

当前效果 #

左上角colocation name标签独占一行，.rack元素从下一行开始排列，容器右侧存在明显空隙，未填满宽度。

期望效果 #

colocation name标签位于左上角，.rack元素从标签右侧开始排列，自动填充容器剩余空间，尽可能多地排列且无空隙。

解决方案 #

修改后的SCSS代码如下：

.colocation {
  border: 1px solid blue;
  display: flex;
  flex-wrap: wrap;
  max-width: 50rem;
  gap: 8px; // 可选，设置元素间间距，不需要可移除

  span {
    color: blue;
    flex: 0 0 auto; // 标签仅占自身内容宽度，不拉伸不收缩
    margin-bottom: 8px; // 可选，标签与下方rack的间距
  }
}

.rack {
  border: 1px solid red;
  flex: 1 1 5rem; // 允许拉伸填充空隙、收缩适应空间，最小宽度5rem
  display: flex;
  flex-direction: column;
  align-items: center; // 让rack内的标签居中

  span {
    color: red;
    margin-bottom: 4px;
  }

  .vstack {
    display: flex;
    flex-direction: column;
    gap: 4px; // 按钮间的间距
  }
}

修改说明 #

1. 调整标签布局：给.colocation内的span设置flex: 0 0 auto，确保标签仅占用自身内容宽度，不会干扰.rack元素的排列。若希望标签独占第一行，可给span添加width: 100%。
2. 优化rack自适应：给.rack设置flex: 1 1 5rem，其中：
   • flex-grow: 1：容器有剩余空间时，自动拉伸填充空隙；
   • flex-shrink: 1：容器空间不足时，自动收缩以适应布局；
   • flex-basis: 5rem：限制.rack的最小宽度，避免被压缩得过小。
3. 内部布局对齐：给.rack添加flex-direction: column和align-items: center，让内部的“rack name”标签居中，按钮堆叠更整齐。
4. 间距优化：通过gap属性设置元素间的间距，提升布局整洁度，不需要可直接移除。

内容的提问来源于stack exchange，提问作者Node.JS