只需在.flex-container .box上设置margin:10px auto;。
之后，如果你想创建一个3列，网格，你将需要添加额外的CSS，如下面的演示：

.flex-container {
  display: flex;
  flex-wrap: wrap; /***** ADDED *****/
  border: 1px solid black;
}

.flex-container .box{ /***** ADDED *****/
  margin:10px calc(16.5% - 60px);
  flex-grow: 1;
  max-width:120px;
}

DEMO

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid black;
  justify-items: center;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
  border: 1px solid black;
}

.flex-container .box{ /***** ADDED *****/
  margin:10px calc(16.5% - 60px);
  flex-grow: 1;
  max-width:120px;
}

.box{
  margin:10px;
  border: 1px solid red;
  width:120px;
  height:120px;
  background-color: lightcyan;
  text-align: center;
  line-height:120px;
}

<h1>Css Grid</h1>
<section class="grid-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</section>
<h1>Flexbox</h1>
<section class="flex-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</section>

使用CSS Grid制作Flexbox效果：

这不是一个标准的网格的东西和flexbox将是显而易见的解决方案。但是，可以通过修改轴网元素的属性来实现此目的：

.box {
  margin: auto; // changed from 10px to auto
}

.box:first-child {
  margin-left: 10px;
}

.box:last-child {
  margin-right: 10px;
}

这将确保第一个和最后一个元素紧挨着边缘，并且边距将在中心增长。

使用Flexbox制作Grid效果：

只需在flex容器中更改此属性：justify-content: space-between;为：justify-content: space-around;他们是相当自我描述。我认为它不需要额外的信息。
一个简单的方法来玩这个是使用浏览器检查器工具。

不要使用1fr，使用auto

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  border: 1px solid black;
  justify-content: space-between;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
}

.box {
  margin: 10px;
  border: 1px solid red;
  width: 120px;
  height: 120px;
  background-color: lightcyan;
  text-align: center;
  line-height: 120px;
}

<h1>Css Grid</h1>
<section class="grid-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</section>
<h1>Flexbox</h1>
<section class="flex-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</section>