display:flex下justify-content属性失效，保留.container类max-width如何解决？

问题根因 #

• 子元素总宽度占满父容器：你给.dual-wrapper和.max-wrapper都设置了width: 50%，两个子元素宽度之和刚好等于flex容器.container的100%宽度，没有剩余空间可供justify-content: space-between分配，因此该属性无法体现出效果。
• 子元素的margin: 0 auto规则冲突：flex布局中，子元素的横向auto margin会优先抢占容器的剩余空间，直接覆盖父容器justify-content的对齐规则。

可行修复方案 #

你可以根据实际需求选择对应的修改方式，全程保留.container的max-width配置：

方案1：实现子元素左右贴边对齐（宽度自适应内容） #

直接删掉子元素的固定宽度width: 50%和margin: 0 auto配置即可，修改后CSS如下：

.dual-wrapper,
.max-wrapper {
  position: relative;
  display: block;
  background: red;
  color: #fff;
  overflow: hidden;
}

修改后两个子元素会分别贴紧容器的左右两侧，中间的空白间距由space-between自动分配。

方案2：子元素各占一半宽度，中间保留固定间距 #

如果需要两个子元素宽度始终各占父容器的一半，只需要删掉子元素的margin: 0 auto，同时给flex容器添加gap属性设置间距，再通过计算属性调整宽度适配即可，修改示例：

/* 给flex容器加gap设置固定间距 */
.mega-wrap .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-content: center;
  margin: 0 auto;
  gap: 20px; /* 可自定义两个块的中间间距数值 */
}

.dual-wrapper,
.max-wrapper {
  position: relative;
  display: block;
  background: red;
  color: #fff;
  width: calc(50% - 10px); /* 减去间距的一半，适配总宽度不溢出容器 */
  overflow: hidden;
}

如果不需要space-between的自动分配逻辑，直接去掉该属性也能实现等宽+固定间距的效果。

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