Flexbox items equal width except for last row

Question

I have photos with text underneath that is variable length. I'm using flexbox to have them align properly and using flex-grow to set the width so that they're equal. This works great for rows that wrap but the last line can stretches to fit the whole row.

How can I equally space each row and also have it start from the left?

fiddle

.container {
  display: flex;
  flex-wrap: wrap;
}

a {
  text-align: center;
  padding: 25px;
  flex: 1 1 0;
}

<div class="container">
  <a href="https://placeholder.com">
   <img src="http://via.placeholder.com/100x100">
    <p>
     Brian
    </p>
  </a>
  <a href="https://placeholder.com">
   <img src="http://via.placeholder.com/100x100">
   <p>
    Betsy 
   </p>
  </a>
  <a href="https://placeholder.com">
   <img src="http://via.placeholder.com/100x100">
   <p>
    Variable Length Names Go Here 
   </p>
  </a>
  <a href="https://placeholder.com">
   <img src="http://via.placeholder.com/100x100">
   <p>
    Alan 
   </p>
  </a>
  <a href="https://placeholder.com">
   <img src="http://via.placeholder.com/100x100">
   <p>
    Another variable length 
   </p>
  </a>
<a href="https://placeholder.com">
   <img src="http://via.placeholder.com/100x100">
   <p>
    Another variable length 
   </p>
  </a>
</div>