使用Flexbox实现无多余空白的内容居中问题求助

关键修改方案 #

调整ul容器与子元素li的间距控制方式，同时优化flex布局的宽度计算逻辑，让黄色ul容器完全贴合笔记卡片宽度并居中：

.container {
  width: 100%;
  display: flex;
  min-height: 100vh; /* 避免内容溢出时容器高度不足 */
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

ul {
  align-content: flex-start;
  margin: 100px auto 40px; /* 合并上下边距，简化代码 */
  max-width: 1400px;
  width: fit-content;
  min-width: fit-content; /* 强制容器宽度贴合内容，避免被拉伸 */
  height: 80vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  overflow-y: scroll;
  border: 3px solid yellow;
  gap: 10px; /* 用flex原生间距属性替代li的margin，避免宽度计算偏差 */
}

ul li {
  border: 2px solid red;
  list-style-type: none;
  font-size: 20px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(10px);
  width: 330px;
  height: 200px;
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  padding: 20px;
  border-radius: 5px;
  position: relative;
  transition: height 0.3s;
  /* 移除原有的margin:5px，改用ul的gap控制间距 */
}

修改说明 #

1. 替换margin为gap：flex布局中使用gap可以精准控制子元素间的间距，避免li的margin导致ul容器宽度计算出现额外空白，确保容器宽度完全由卡片宽度和间距总和决定。
2. 添加min-width约束：给ul设置min-width: fit-content，阻止父容器的flex布局强制拉伸ul宽度，让容器始终贴合当前行的卡片总宽度。
3. 优化容器高度：将.container的height:100vh改为min-height:100vh，保证内容超过视口高度时容器能自动扩展，避免内容溢出。

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