弹性项目的水平中心

Question

这就是我想要它的样子。由于我需要为width: 100%元素保留ul.flex，为了使其适合不同的设备，我无法使用margin: 0 auto将其水平居中。

请注意，目前我不想使用任何媒体查询

这就是它现在的样子

这是我使用justify-content: center时的样子。所以我认为它不能解决我的问题。

的jsfiddle

https://jsfiddle.net/2v5nr7rg/

标记看起来像这样

<ul id="flex">
  <li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=555&txtclr=fff&txt=468×468&w=468&h=468"></li>
  <li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=555&txtclr=fff&txt=468×668&w=468&h=468"></li>
  <li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=555&txtclr=fff&txt=468×468&w=468&h=468"></li>
  <li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=555&txtclr=fff&txt=468×468&w=468&h=468"></li>
  <li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=555&txtclr=fff&txt=468×468&w=468&h=468"></li>
  <li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=555&txtclr=fff&txt=468×468&w=468&h=468"></li>
</ul>

样式看起来像这样

body {
  background: #ccc;
}

#flex {
  box-sizing: border-box;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 auto;
  padding: 10px 0 0 10px;
}

li {
  margin: 0 10px 10px 0;
  width: 468px;
}

img {
  display: block;
  width: 100%;
}