为何ul列表项无间距？flex布局justify-content属性失效问题

问题根源 #

你设置的justify-content: space-between/space-around没生效，核心原因是flex容器.ul-list没有足够的可用宽度。

flex容器默认宽度为fit-content，也就是刚好包裹所有子元素（<li>）的总宽度，此时容器内部没有多余空间，justify-content属性自然无法分配间距——它的作用是在容器的可用空间内，调整子元素的排列方式与间距。

解决方案 #

只需让.ul-list获得足够的可用宽度即可，以下是两种常用实现方式：

方式1：让父元素.list1占据容器中间全部空间 #

给.list1添加flex: 1，使其在.container的flex布局中，占据Left和RIGHT之外的所有可用空间，再通过调整padding或margin确保ul有合适的宽度范围：

修改后的CSS代码：

.container {
  border: 2px solid red;
  background-color: antiquewhite;
  height: 650px;
  display: flex;
  justify-content: space-around;
  align-items: flex-start; /* 可选：让内容顶部对齐 */
}

.list1 {
  flex: 1; /* 关键：占据中间全部可用空间 */
  padding: 0 50px 0 40px; /* 替代ul的左右margin，避免宽度溢出 */
}

.ul-list {
  display: flex;
  list-style-type: none;
  border: 2px solid green;
  margin: 0;
  padding: 0; /* 重置ul默认padding，避免额外间距 */
  justify-content: space-between;
  width: 100%; /* 让ul占满父元素宽度 */
}

.list-item {
  border: 2px solid red;
}

方式2：直接给.ul-list设置固定宽度 #

如果不需要.list1占满中间空间，可直接给.ul-list设置固定宽度，为justify-content提供可分配的空间：

修改后的CSS代码（仅调整.ul-list）：

.ul-list {
  display: flex;
  list-style-type: none;
  border: 2px solid green;
  margin: 0 50px 0 40px;
  padding: 0;
  justify-content: space-between;
  width: 800px; /* 固定宽度，提供可用空间 */
}

效果说明 #

修改后，<li>元素会在.ul-list的宽度范围内，按照justify-content的设置自动分散排列并产生间距，无需手动为每个<li>设置margin。

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