title: Allow items in flexbox to evenly align themselves to container's edges without space-between
body: <p>Sorry if this question is obvious and I am missing something. I am creating a site which has a flexbox container with elements inside it that wrap around. I want my items inside the container to stretch to the edge of the container to ensure there is the correct amount of whitespace. I can achieve this by using justify-content: space-between but when there is a row with more than one item and less than four they still must space themselves. How can I fix this problem? I don't want to use flex-start and adjust the margin between the items because that seems inaccurate and a problem for responsiveness. Below is my code for the flex container.</p>
  
  <pre><code>.clothingitems {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background: white;
  }
  
  .clothingitem {
  width: 265px;
  height: 450px;
  display: flex;
  flex-flow: column;
  }
  </code></pre>
  
  <p>There is a live website but beware the page I'm mentioning has not been made responsive. It can be found here: <a href="https://observer-archive.firebaseapp.com/feed.html" rel="nofollow noreferrer">Site here</a></p>
  
  <p>Thank you.</p>