FlexBox对齐(拉伸)最后一项

时间:2018-01-12 10:36:58

标签: javascript html css css3 flexbox

.Hi Folks我试图设置Javascript函数来对齐(拉伸)FlexBox中的最后一个孩子。 要在行中显示最多三列。 article-card-container设置为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,即使只有两个元素。

在纯JavaScript中是否有更好的解决方案(我是JS新手)如何在最后一个子类.article-card-container选择器到达&#34; flex&#34;属性和更改(删除和添加)其价值,避免写全新的类?

感谢任何建议或提示,以使其更好

2 个答案:

答案 0 :(得分:2)

如果flex

,您必须将lastElementChild的{​​{1}}和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;
}

答案 1 :(得分:0)

这可以仅使用CSS解决,并且比使用脚本更有效。

通过组合nth-child / nth-last-childlast-child选择器来完成,并且可以处理任意数量的项目,从1项开始。

就像这样,当nth-*last-child选择器同时匹配一个元素时,规则就会启动。

例如,:nth-child(3n+1):last-child规则将针对每个第3个元素,从第1个元素开始,然后是第4个,第7个,依此类推,如果它也是最后一个元素,那么选择最后一行中的任何一个元素

:nth-child(3n+1):nth-last-child(2)也会这样做,但如果它是第二个元素则选择它,这意味着最后一行有2个。

最终的兄弟选择器+将针对直接兄弟姐妹,如果有2,这也将是最后一个。

Stack snippet

&#13;
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;