title: How can i center my v-img and v-card in a v-flex?
body: <p><strong>Summary</strong></p>
  
  <p>I'm trying to display some album picture in a row in square shape <em>like in the codepen below</em>. Unfortunately, I'm meeting a problem. When the view change size in my browser, the picture should be separate by equally space, but it change when the view seem to be in <code>sm</code> and <code>xs</code>.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>The space between the cards in the container seem to be deficient in <code>sm</code> and xs . You can see my problem when moving from <code>md</code> to <code>sm</code>. <a href="https://i.stack.imgur.com/gp2wi.png" rel="nofollow noreferrer">Here the space between the cards are a lot bigger than expected</a>Also, I feel that the card should be at the center of the view in those mode like it is in <code>md</code> and upper. 
  <a href="https://i.stack.imgur.com/tzOo9.png" rel="nofollow noreferrer">The card should be at the center, but isn't</a></p>
  
  <p><strong>Tentative</strong></p>
  
  <p>I have try to set my <code>v-flex</code> with <code>xs{size}</code>, but the <code>v-card</code> overlap each other when I'm changing the view size in my browser.</p>
  
  <p><strong>Code</strong></p>
  
  <p><a href="https://codepen.io/anon/pen/WqjrwK" rel="nofollow noreferrer">https://codepen.io/anon/pen/WqjrwK</a></p>
  
  <p><strong>Expected</strong></p>
  
  <p>I expect <code>v-card</code> and <code>v-img</code> to be separate by the same space in <code>xs</code> and <code>sm</code> as <code>md</code> and <code>lg</code>. Change the view size of your browser in codepen with the link above to see your problems. <a href="https://i.stack.imgur.com/60zH3.jpg" rel="nofollow noreferrer">The view as expected. It should be similar in <code>sm</code> and <code>xs</code></a></p>