flex布局设置justify-content: space-between未生效的原因是什么

问题原因 #

justify-content: space-between 的作用是把flex容器的剩余空闲空间均匀分配在各个flex子项之间，该属性不生效几乎都是因为没有剩余空间可以分配，你的代码里核心问题就是：

• flex容器的两个直接子元素 .left-img 和 .right-text 都没有设置显式宽度
• 图片默认会按照自身原始尺寸撑满父容器 .left-img，右侧文本容器也会按照内容长度尽可能占用可用宽度，最终两个子元素的总宽度刚好等于flex容器的总宽度，没有剩余空间可供分配，自然看不出space-between的效果。

另外也可以先排查是否有更高优先级的CSS规则覆盖了.flex的display: flex或者justify-content属性，打开浏览器F12开发者工具查看元素样式即可确认。

解决方法 #

方法1：给flex子项设置固定/比例宽度 #

给两个子项设置加起来小于100%的宽度，预留出剩余空间让space-between生效，示例修改：

.left-img {
  width: 40%;
}
.right-text {
  width: 55%;
}

这样两个子项总宽度是95%，剩下5%的空间会被space-between自动分配到两栏中间。

方法2：直接用gap属性控制间距 #

如果不需要依赖剩余空间分配，直接给flex容器设置gap属性即可固定两栏间距，使用更直观：

.flex {
  display: flex;
  justify-content: space-between;
  gap: 2em; /* 自定义两栏之间的间距大小 */
  align-items: flex-start; /* 可选，避免左侧图片被拉伸到和右侧文本高度一致 */
}

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