title: Flexbox justify-content space
body: <p>I'm using flex box to make a layout for my products list but when I try to set justify-content to be space-between it works well on 4 items scenario but for less items (2 or 3) the space between them grows so how I set the space between items to be the same regardless the number of items in the row?</p>
  <pre><code>.productsContainer {
    background-color: $color_1;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .product {
    flex-basis: 23%;
    border: 1px solid $color_2;
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    margin-bottom: 20px;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/OKEtH.png" rel="nofollow noreferrer">Screenshot</a></p>