保证金自动容器与flexbox部分内容结合在一起

Question

所以我用固定宽度的容器进行了一些测试，但我也想使用flexbox。

所以我想制作一个网页，其中所有元素都在容器内，我也将这一部分与flexbox结合在一起。

这是创建布局的正确方法吗？还是我应该删除.container而仅使用flexbox？

标记：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: normal 1rem/1.5 sans-serif;
}

#showcase {
  background: #888;
  color: #fff;
  padding: 1rem;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  background: red;
}

.showcase-content {
  display: flex;
  justify-content: center;
  height: 200px;
}

<section id="showcase">
  <div class="container showcase-content">

    <div class="box">
      <h4>Box 1</h4>
    </div>
    <div class="box">
      <h4>Box 2</h4>
    </div>
    <div class="box">
      <h4>Box 3</h4>
    </div>
    <div class="box">
      <h4>Box 4</h4>
    </div>
    <div class="box">
      <h4>Box 5</h4>
    </div>

  </div>
</section>