FlexBox对齐（拉伸）最后一项 [英] FlexBox align (stretch) last Item

问题描述

.Hi Folks我试图设置Javascript函数来对齐（拉伸）FlexBox中的最后一个孩子。
显示我在行中的最多三列。 article-card-container设置为 flex：1 1 calc（100 *（1/3））; 。

.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));.

要拉伸我需要设置的最后一项 flex：1;

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

我正在使用 leftover === 1 进行测试，因为剩余的项目甚至有2项，剩余> 0 导致问题。

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).

中的第一个条件使用语句是因为模数返回1，即使只有两个元素。

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

在纯JavaScript中是否有更好的解决方案（我是JS新手）如何在最后一个子类 .article-card-container 选择器获取flex属性并更改（remove& ;添加）它的价值并避免写出全新的类？

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

推荐答案

您必须设置 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>

这篇关于FlexBox对齐（拉伸）最后一项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！