т, ребята. Я пытаюсь установить функцию Javascript для выравнивания (растяжения) последнего потомка в FlexBox. Чтобы показать максимум три столбца в строке у меня на. артикул-карта-контейнер установленflex: 1 1 calc(100 * (1/3));.

Чтобы растянуть последний предмет мне нужно установить на него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>

Вот мое решение, которое работает, НО ...

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');
    }
};

Я используюleftover === 1 для теста, потому что есть еще 2 предмета иleftover > 0 вызвать проблемы.

Проблема этой функции в том, что мне пришлось написать новый класс, который будет назначен (включая все подклассы для внутренних элементов = много кода).

Первое условие вif заявление используется потому, чтоmodulus возвращал 1, даже когда было только два элемента.

Есть ли лучшее решение (я новичок в JS) в чистом JavaScript, как на последнем дочернем классе.article-card-container Селектор добирается до свойства "flex" и изменяет (удаляет и добавляет) его значение и избегает написания нового класса?

Спасибо за любые предложения или советы, чтобы сделать это лучше