FlexBox align (stretch) the last item

Question

.Hi Folks Im trying to set a Javascript function to align (stretch) the last child in a FlexBox. To show a maximum of three columns per row, I have. item-card-container is installed flex: 1 1 calc(100 * (1/3));.

To stretch the last element, I need to set it flex: 1;

<div id="content-container">
<article class="article-card-container"></article>
<article class="article-card-container"></article>
<article class="article-card-container"></article>
<article class="article-card-container"></article>
</div>

Here is my solution that works, BUT ...

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 > 3 && leftover === 1 ) { // condition
      // start loop
        for (var i = 0; i < 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');
    }
};

Im using leftover === 1for the test because there are two remaining elements and leftover > 0 cause problems.

The problem with this function is that I had to write a new class to be assigned (including all subclasses for internal elements = a lot of code).

The first condition in the expression is ifused because it modulusreturned 1, there were even only two elements.

(Im new JS) JavaScript, .article-card-container "flex" ( ) ?

,

Answer 1

flex lastElementChild lastElementChild.previousElementSibling 1, leftover===2

window.onload = function alignLeftovers() {
  var container = document.getElementById("content-container");
  var childernCount = container.children.length;
  console.log(childernCount);
  var leftover = container.children.length % 3;
  if (childernCount > 3 && leftover === 1) {
    container.lastElementChild.style.flex = "1"
  } else if (childernCount > 3 && leftover === 2) {
    container.lastElementChild.style.flex = "1"
    container.lastElementChild.previousElementSibling.style.flex = "1"
  }
};

#content-container {
  display: flex;
  flex-wrap: wrap;
}

.article-card-container {
  width: 33.3333%;
  padding: 9px;
  background: red;
  border: 2px solid #fff;
  box-sizing: border-box;
}

<div id="content-container">
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
</div>

Hide result

Answer 2

CSS , script.

nth-child/nth-last-child last-child , 1 .

, nth-* last-child , .

, :nth-child(3n+1):last-child , 1-, 4-, 7- , , .

:nth-child(3n+1):nth-last-child(2) , , 2- , 2.

sibling + , 2, .

.content-container {
  display: flex;
  flex-wrap: wrap;
}

.article-card-container {
  width: 33.3333%;
  padding: 9px;
  background: red;
  border: 2px solid #fff;
  box-sizing: border-box;
}

/*  if every 3rd, start from 1st, also being 2nd last + last */
.article-card-container:nth-child(3n+1):nth-last-child(2),
.article-card-container:nth-child(3n+1):nth-last-child(2) + article {
  width: 50%;
}

/*  if every 3rd, start from 1st, also being last  */
.article-card-container:nth-child(3n+1):last-child {          
  width: 100%;
}

/*  for demo styling  */
.content-container + .content-container {
  margin-top: 20px;
}

<div class="content-container">
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
</div>

<div class="content-container">
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
</div>

<div class="content-container">
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
  <article class="article-card-container"></article>
</div>

Hide result