如何对中FLEX容器但向左对齐FLEX项

Question

如何对中FLEX容器但向左对齐FLEX项

我希望弹性项目是居中的，但当我们有第二行，有5(从下面的图像)在1，而不是居中的父。

下面是我所拥有的一个例子：

ul {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: center;

  margin: 0;

  padding: 0;

}

li {

  list-style-type: none;

  border: 1px solid gray;

  margin: 15px;

  padding: 5px;

  width: 200px;

}

<ul>

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

  <li>6</li>

</ul>

http://jsfiddle.net/8jqbjese/2/