如何让数量可变的Flex元素适配父容器宽度且左对齐？

我正在设置一个适配父容器宽度的盒子网格，使用Flex布局。当盒子数量为3的倍数时，通过justify-content: space-between能让布局完美适配父容器，但盒子数量为5个时，第二行的两个盒子会分别位于左右两端，无法左对齐。如果移除justify-content: space-between，盒子又无法适配父容器宽度。

如何实现：让盒子适配父容器宽度，同时不满3个盒子的行保持左对齐？

以下是原始代码：

HTML #

<div class="row text-center">
  <div class="col-12 text-center">
    <div class="doc-details-grid-wrapper">
      <div class="doc-details-title">
        <h4>Section 1</h4>
        <hr>
      </div>
      <div class="doc-details-grid">
        <a href="" class="box box1 callout">
          <h5>Title goes here</h5>
        </a>
        <a href="" class="box box2 callout">
          <h5>Title goes here</h5>
        </a>
        <a href="" class="box box3 callout">
          <h5>Title goes here</h5>
        </a>
        <a href="" class="box box4 callout">
          <h5>Title goes here</h5>
        </a>
        <a href="" class="box box5 callout">
          <h5>Title goes here</h5>
        </a>
      </div>
    </div>
  </div>
</div>

CSS #

h5 {
  color: #fff;
}
.doc-details-grid {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        margin: 10px 0 50px;
        min-height: 200px;
    }
    
    .doc-details-grid>a {
        background-color: #2A88A6;
        display: flex;
        flex-basis: calc(100% - 30px);
        justify-content: center;
        flex-direction: column;
    }
    .doc-details-grid>a:hover {
        background-color: #136A85;
    }
    .doc-details-grid h5 {
        padding-bottom: 0;
    }  
    .doc-details-grid>div>div {
        display: flex;
        justify-content: center;
        flex-direction: row;
    }
    .box {
        margin: 10px;
        border-radius: var(--bs-border-radius-lg)!important;
    }
    @media (min-width: 768px) {
        .doc-details-grid>a {
            display: flex;
            flex-basis: calc(33% - 40px);
            justify-content: center;
            flex-direction: column;
        }
    }

方法一：使用Flex gap属性 + 精确宽度计算（推荐，现代浏览器兼容） #

这种方法用gap替代margin控制间距，结合精确的宽度计算，既能让满行盒子适配父容器，又能让最后一行左对齐：

修改后的核心CSS：

.doc-details-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start; /* 改为左对齐 */
    gap: 20px; /* 设置盒子间的水平/垂直间距 */
    margin: 10px 0 50px;
    min-height: 200px;
}

.doc-details-grid>a {
    background-color: #2A88A6;
    display: flex;
    /* 计算宽度：父容器宽度减去2个间距，再平分给3个盒子 */
    flex-basis: calc((100% - 2 * 20px) / 3);
    flex-grow: 0; /* 禁止盒子拉伸，保持固定宽度 */
    flex-shrink: 0; /* 禁止盒子收缩 */
    justify-content: center;
    flex-direction: column;
    margin: 0; /* 去掉原有margin，用gap替代 */
    border-radius: var(--bs-border-radius-lg)!important;
}

/* 移动端适配 */
@media (max-width: 767px) {
    .doc-details-grid>a {
        flex-basis: 100%;
    }
}

方法二：伪元素占位（兼容旧浏览器） #

如果需要兼容不支持gap的旧浏览器，可以保留justify-content: space-between，通过伪元素填充最后一行的空位，让盒子保持左对齐：

修改后的核心CSS：

.doc-details-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    margin: 10px 0 50px;
    min-height: 200px;
}

.doc-details-grid>a {
    background-color: #2A88A6;
    display: flex;
    /* 调整宽度计算：3等分父容器，减去间距 */
    flex-basis: calc(33.333% - 20px);
    justify-content: center;
    flex-direction: column;
    margin: 10px 0; /* 只保留上下margin，左右间距由space-between控制 */
    border-radius: var(--bs-border-radius-lg)!important;
}

/* 添加伪元素填充最后一行空位 */
.doc-details-grid::after {
    content: "";
    flex-basis: calc(33.333% - 20px);
    visibility: hidden; /* 隐藏占位元素，不影响视觉 */
}

/* 移动端适配 */
@media (max-width: 767px) {
    .doc-details-grid>a {
        flex-basis: 100%;
    }
    .doc-details-grid::after {
        flex-basis: 0; /* 移动端不需要占位 */
    }
}

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