Flex box space-between margins with space-around wrapping behavior

Question

I am making a site that will have three cards and to create them I'm using flex box. I am using justify-content: space-between which works perfectly when the three columns are all on the same row, as their margins are perfect with the container, and the space in-between them is great.

However, when the columns wrap, the column that is now on the new row is at the same left margin as the first, which is expected with space-between , but in my scenario, space-around 's wrap behavior would look much better, as I have and odd number of cards.

Is there a way for me to get space-between 's outer margin alignment with space-around 's wrapping behavior?

Here is a codepen that gives a quick example of what I have now.

https://codepen.io/anon/pen/xdrpEo

  .flex-row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: spacing-between; } .file-links-flex-container { max-width: 400px; flex-grow: 1; background-color: red; } .container-content { justify-content: flex-start; padding: 0 30px; max-height: 600px; } 

 <div class="flex-row space-around"> <div class="file-links-flex-container col"> <div class="container-header"> <h5>A</h5> </div> <div class="container-content"> <p>I AM TEST CONTENT!</P> </div> </div> <div class="file-links-flex-container col"> <div class="container-header"> <h5>B</h5> </div> <div class="container-content"> <p>I AM TEST CONTENT!</P> </div> </div> <div class="file-links-flex-container col"> <div class="container-header"> <h5>C</h5> </div> <div class="container-content"> <p>I AM TEST CONTENT!</P> </div> </div> </div> 

Answer 1

Try adding margin: 0 auto, You get that.

.file-links-flex-container{
     margin: 0 auto;
}

I think this one helped you. :) Even you can solve this one using justify-content:center; but margin will be the good one.