父div设置flex布局后子按钮间距失效，如何实现按钮块居中且保留间距？

问题原因 #

你的.button-wrap仅设置了max-width: 200px未指定明确宽度，作为外层flex容器的子元素，它的宽度会默认收缩到刚好容纳两个按钮的尺寸，此时justify-content: space-between没有多余空间可以分配，自然就不会产生间距。

解决方案 #

方案1（推荐，更灵活）

直接用flex布局的gap属性控制间距，不需要依赖容器剩余空间分配，调整间距也更直观：
修改.button-wrap的CSS如下：

.button-wrap {
  display: flex;
  gap: 24px; /* 这个数值可以根据你需要的间距自由调整 */
}

方案2（保留原有space-between逻辑）

给.button-wrap设置固定宽度，让容器有多余空间供justify-content分配：

.button-wrap {
  display: flex;
  justify-content: space-between;
  width: 200px; /* 把原有的max-width改成固定width即可 */
}

两种方案都可以在保留按钮间距的同时，让外层容器的水平垂直居中逻辑正常生效。

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