title: Scale flexbox items in the last row to the same width with JS
body: <p>I have children elements in the flexbox. I want them to be responsive and with a max-width of 200px. They scale nicely but since the last row has fewer children than the other rows, the problem is that those are not the same size as the rest, and obviously I want the same dimension for all children.</p>
  <p>First, I tried to use grid, but then I am not able to center the children in the last row. So that's not the solution.</p>
  <p>I also read a similar question where the answers are that it's just not possible to do with flexbox.</p>
  <p>So, how to do it with JavaScript since it's the last option?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .item {
    height: 50px;
    flex: 30%;
    max-width: 200px;
    background: #ababab;
    border: 2px solid #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>