html - 如何在页面上居中块，同时使用css flexbox左对齐任何尾随

Question

包含待售产品列表的网页。每个产品都在一个带有标题、图像和价格的 div 中。我试图让所有产品块在页面上居中，但在容器内让产品左对齐。下面的代码显示列表左对齐，右侧有空格。我想摆脱空白。我可以将页面上的所有块居中，但我不喜欢页面底部的产品如何居中，尤其是当只有一两个项目时。每个盒子都是固定的宽度和高度。

如何让容器不占用页面元素的整个宽度？我想如果我能让容器只占用其中元素的宽度，那么容器就会在页面中居中。

#page {
  border: 2px solid #01f;
  margin: 1em;
}

#container {
  border: 2px solid #f00;
  display: flex;
  flex-wrap: wrap;
  margin: 1em;
}

.box {
  border: 2px solid #000;
  height: 350px;
  width: 350px;
  margin: 1em;
}

<div id="page">
  <div id="container">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    <div id="box4" class="box"></div>
    <div id="box5" class="box"></div>
    <div id="box6" class="box"></div>
    <div id="box7" class="box"></div>
    <div id="box8" class="box"></div>
    <div id="box9" class="box"></div>
    <div id="box10" class="box"></div>
  </div>
</div>

标签： htmlcssflexbox