Horizontal center for flex items

Question

This is what I want it to look like. Since I need to keep width: 100% for the ul.flex element, to make it fit different devices, i can´t use margin: 0 auto to center it horizontal.

Note that I don´t want to use any media queries at the moment

This is what it looks like right now

This is what it looks like when I use justify-content: center. So I don´t think it solves my issue.

JSFiddle

https://jsfiddle.net/2v5nr7rg/

Markup looks like this

<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>

Styling looks like this

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%;
}