0

.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 flex: 1 1 calc(100 * (1/3));.

To stretch last item I need set on 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 is working 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 === 1 for test because there are even 2 items leftover and leftover > 0 cause problems.

Problem of this function is that I had to write new class to be assigned (included all subclasses for inside elements = lots of code).

First condition in if statement is used because modulus was returning 1 even there were only two elements.

Is there better solution (Im new to JS) in pure JavaScript how to on last child class .article-card-container selector get to "flex" property and change (remove & add) its value and avoid to write brand new class?

Thanks for any suggestions or hints to make it better

Asons
  • 84,923
  • 12
  • 110
  • 165
Stan Skrivanek
  • 23
  • 1
  • 10
  • no clear what you want to achieve, can you illustrate ? – Temani Afif Jan 12 '18 at 10:41
  • Im creating WP theme and list of articles is different and max columns on row is 3. Because all flex elements have set flex value to 1/3 all Im trying is to remove this value to and stretch last child to 100% – Stan Skrivanek Jan 12 '18 at 10:52
  • so no need JS for this :) simple CSS would be enough – Temani Afif Jan 12 '18 at 10:53
  • Its my first attempt to ask something and I get negative point. can someone explain why I got downvote for my Q? – Stan Skrivanek Jan 12 '18 at 12:28
  • Thanks, but I'm now aware to ask any more questions because I don know what a good question mean. I tried to sort JS code because I did'n find right answer here and I have got downvote. I know there is 100 ways to sort one problem but I don't understand judging someone question only because is asked. At least I always trying to help others without judging them. So to who downvote. IM SORRY to ask – Stan Skrivanek Jan 12 '18 at 14:56
  • Here is help on how to ask a good question: https://stackoverflow.com/help/how-to-ask – Asons Jan 12 '18 at 16:30
  • I did upvote as soon as wrote thanks to guys to help me. But system didn't accepted to show my upvote because I don't have 15 answers or something like that it just said thanks we accepted your upvote but... So what else I have to do to thanks and appreciate community help. – Stan Skrivanek Jan 12 '18 at 17:04

2 Answers2

2

You have to set the flex of lastElementChild and lastElementChild.previousElementSibling to 1 if 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>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
  • Thanks for answer I'have tried very similar CSS style and it can partially sort problem, I mean when leftover is 1 (4,7, 10 ....) but how to sort situation where are 2 articles left over (in 5, 11 .. articles scenario) Thats why I tried to set function with conditions leftover === 1 to 100% to test it and later set rules for 2 leftover elements to set flex to 50%. Is there any CSS solution for it? Im sorry not to be absolutely clear with initial Question – Stan Skrivanek Jan 12 '18 at 11:28
  • When 2 articles are left, how you want to aligned them? – Bhuwan Jan 12 '18 at 11:46
  • To fit last line 50/50 – Stan Skrivanek Jan 12 '18 at 11:51
  • This can be done using CSS alone ... check my answer – Asons Jan 12 '18 at 12:17
  • @LGSon Thank You – Stan Skrivanek Jan 12 '18 at 12:31
1

This can be solved with CSS only, and will be much more efficient than using script.

It is done by combining the nth-child/nth-last-child and last-child selector, and will work on any number of items, with start from 1 item.

It work like that, when both the nth-* and last-child selector will match an element at the same time, the rule kicks in.

E.g., the :nth-child(3n+1):last-child rule will target every 3rd element, starting from the 1st, then 4th, 7th and so on, if it also is the last, and with this, select any single element on the last row.

The :nth-child(3n+1):nth-last-child(2) will do the same, though select it if it is the 2nd element, meaning there is 2 on the last row.

The final sibling selector + will target the immediate sibling if there were 2, which always also will be the last.

Stack snippet

.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>
Asons
  • 84,923
  • 12
  • 110
  • 165