使用display:flex的space-between时如何限制子元素间距？

问题出在justify-content-between（Bootstrap对应类）的逻辑上：它会把容器的剩余宽度全部分配给按钮之间的间距，100%宽度的容器自然会导致间距过大。以下是针对需求的修改方案，以及对你关于margin方案的判断：

一、修改方案（推荐使用方案1） #

方案1：用Bootstrap的gap-*类设置固定间距 #

Bootstrap 5及以上版本支持flex布局的gap间距类，直接给flex容器添加gap-1/gap-2/gap-3等类（数值对应Bootstrap内置的间距尺度，数值越小间距越小），就能给按钮之间设置统一的小间距，完全规避space-between的均分空间问题。示例代码：

<div class="w-100 d-flex gap-2">
  <button class="btn btn-primary">按钮1</button>
  <button class="btn btn-secondary">按钮2</button>
  <button class="btn btn-success">按钮3</button>
</div>

这样按钮会从容器左侧开始排列，之间保持你需要的小间距，完全符合目标效果。

方案2：调整容器对齐逻辑+限制可用空间 #

如果你希望按钮不是完全靠左，而是有一定的分布但间距更小，可以放弃justify-content-between，改用justify-content-start配合gap，或者给容器添加左右内边距减少可分配的剩余空间：

<div class="w-100 d-flex justify-content-start gap-3 px-4">
  <button class="btn btn-primary">按钮1</button>
  <button class="btn btn-secondary">按钮2</button>
  <button class="btn btn-success">按钮3</button>
</div>

二、关于margin-left/right方案的判断 #

你认为使用margin-left/right不是好方案，这个观点完全正确，原因如下：

• 直接给所有按钮加margin会导致第一个按钮左侧、最后一个按钮右侧出现多余间距，需要额外给边缘按钮取消margin，代码冗余且容易出错；
• gap是flex布局的原生属性，Bootstrap的gap-*类已经封装了这个逻辑，能统一控制元素间的间距，不需要考虑边缘情况，代码更简洁易维护；
• 只有在使用Bootstrap 4及以下版本（不支持gap类）时，才需要用margin作为替代方案，但依然建议通过ms-*（margin-start）只给第二个、第三个按钮加左边距，避免边缘间距问题。

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