删除包装项目后的空格

Question

我需要一个未知数量的元素的flexbox-布局，当没有更多的可用空间时，它会换行到下一行。但我需要整个布局(红色边框)在容器(绿色边框)内居中，但我不希望项目(黄色框)在包装时居中。

在项目换行到第二行(项目6-8)后，外部红色框不再居中，因为它占用了所有可用的空间，在项目编号5和红线的右边缘周围留下了很大的空白。

有没有办法强制红色方框只占用它需要的空间，然后居中？

​

​

​

.container {
  margin: 50px 10px;
  padding: 10px;
  display: flex;
  justify-content: center;
  border: 3px solid green;
}

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  display: flex;
  border: 3px solid red;
}

.wrap {
  flex-wrap: wrap;
}

.wrap li {
  background: gold;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 50px;
  height: 50px;
  margin: 10px;
}

<div class="container">
  <ul class="flex-container wrap">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
    <li class="flex-item">7</li>
    <li class="flex-item">8</li>
  </ul>
</div>

​

Answer 1

一种简单的解决方法是将特定的width添加到flex-container中，这样框的大小就不会增加。

另一种选择是将边际添加到flex-container或将填充添加到container。

注:最好使用%或vw添加宽度/边距/填充，而不是使用px，以便它与屏幕大小保持独立。

例如,

​

.container {
  margin: 50px 10px;
  padding: 10px;
  display: flex;
  justify-content: center;
  border: 3px solid green;
}

.flex-container {
  padding: 0;
  margin: 10%;  
  list-style: none;
  border: 1px solid silver;
  display: flex;
  border: 3px solid red;
}

.wrap {
  flex-wrap: wrap;
}

.wrap li {
  background: gold;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 50px;
  height: 50px;
  margin: 10px;
}

<div class="container">
  <ul class="flex-container wrap">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
    <li class="flex-item">7</li>
    <li class="flex-item">8</li>
  </ul>
</div>

​