如何使"空间周围"的柔性框布局的最后一行不居中?

Chr*_*oba 5 html css css3 flexbox

我正在使用弹性盒来安排一些同样大小的div,我已经设置好了justify-content: space-around.对于除最后一行之外的所有行,这看起来很棒.我希望最后一行中的任何元素与前一行中最左边的div相同.

这就是它的样子:

在此输入图像描述

在此输入图像描述

这就是我想要的:

在此输入图像描述

在此输入图像描述

我怎样才能做到这一点?

目前,我有这个CSS:

#container {
  display: flex;
  flex-flow: row wrap;
  max-width: 400px;
  border: 1px solid red;
  justify-content: space-around
}

#container > div {
  border: 1px solid black;
  width: 110px;
}
Run Code Online (Sandbox Code Playgroud)

使用此HTML结构:

<div id="container">
  <div>Content</div>
  <div>Content</div>
  ...
  ...
</div>
Run Code Online (Sandbox Code Playgroud)

这是一个小提琴:https://jsfiddle.net/chrisshroba/q2mm9ccj/