title: FlexBox align (stretch) last Item
body: <p>.Hi Folks Im trying to set Javascript function to align (stretch) last child in FlexBox. 
  To show max three columns in row i have on  . article-card-container is set <code>flex: 1 1 calc(100 * (1/3));</code>.</p>
  
  <p>To stretch last item I need set on it <code> flex: 1; </code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="content-container"&gt;
  &lt;article class="article-card-container"&gt;&lt;/article&gt;
  &lt;article class="article-card-container"&gt;&lt;/article&gt;
  &lt;article class="article-card-container"&gt;&lt;/article&gt;
  &lt;article class="article-card-container"&gt;&lt;/article&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <p>Here is my solution that is working BUT ...</p>
  
  <pre class="lang-js prettyprint-override"><code>window.onload = function alignLeftovers() {
      // get container with flexboxes
      var container = document.getElementById("content-container");
      // get container children
      var childernCount = container.children.length;
      // get leftover children
      var leftover = container.children.length % 3;
  
      if (childernCount &gt; 3 &amp;&amp; leftover === 1 ) { // condition
        // start loop
          for (var i = 0; i &lt; container.children.length; i++) {
              // remove class on last child
              container.lastElementChild.classList.remove('article-card-container');
          }
          // add a new class on last child
          container.lastElementChild.classList.add('article-card-container-100');
      }
  };
  </code></pre>
  
  <p>
  Im using <code>leftover === 1</code> for test because there are even 2 items leftover and <code>leftover > 0 </code> cause problems.</p>
  
  <p>Problem of this function is that I had to write new class to be assigned (included all subclasses for inside elements = lots of code).</p>
  
  <p>First condition in <code>if</code> statement is used because <code>modulus</code> was returning 1 even there were only two elements.</p>
  
  <p>Is there better solution (Im new to JS) in pure JavaScript how to on last child class <code>.article-card-container</code> selector get to "flex" property and change (remove &amp; add) its value and avoid to write brand new class? </p>
  
  <p>Thanks for any suggestions or hints to make it better</p>