使用CSS在容器内水平放置中心框

Question

我有一些HTML：

    .box {
      background-color: red;
      margin: 10px;
      width: 200px;
      height: 200px;
    }

    .container {
      background-color: black;
      padding: 10px;
      width: 100%;
    }

    .row {  
      background-color: blue;
      display: flex;
      flex-wrap: wrap;
    }

    .row > * {
      flex: 0 0 auto;
    }

<div class="container">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div>
    </div>

我想做的是将容器内的“行”居中。而且我希望“行”环绕盒子并且不要宽于盒子侧面的边缘（10px * 2）。 因此，从理论上讲，它应该看起来像这样的图像：

黑色，是容器，蓝色是行，红色是盒子。 有谁知道怎么做？

要添加挑战，如果容器已展开，则框将适应并移动，保持其大小和填充（但行应位于中央）。同样，如果容器缩小到小于行，我希望行也收缩，并仍然包装盒子。

我希望一切都有道理。