Q:

Center flex list item on screen resize

I have a list which has six li elements. These by default all appear on one row. 
On screen resize 540px, I want the last li item (item 6) to go onto another row, but be center aligned (so below item 3).
Unsure what I'm doing wrong here:

.container {
  display: flex;
  justify-content: center;
}

ul {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

ul li {
  margin-right: .5em;
  border: 1px solid #a2a4a5;
  padding: 15px;
}

@media (max-width: 540px) {
  ul li {
    border: 1px solid blue;
    align-items: center;
  }
}
<div class="container">
  <ul>
    <li>Text 1</li>
    <li>Text 2</li>
    <li>Text 3</li>
    <li>Text 4</li>
    <li>Text 5</li>
    <li>Text 6</li>
  </ul>
</div>

A:

Try to add 
justify-content: center

Or 
 justify-content: space-between //This will look close to what you actually have in responsive mode

to your ul
There is no way to achieve it without touching to all the other flex items

