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

问题描述

.Hi Folks 我正在尝试设置 Javascript 函数以对齐(拉伸)FlexBox 中的最后一个子项.要在行中显示最多三列，我在 .article-card-container 设置为 flex: 1 1 calc(100 * (1/3));.

要拉伸我需要在其上设置的最后一项 flex: 1;

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

这是我的解决方案，但有效...

window.onload = function alignLeftovers() {//获取带有 flexbox 的容器var container = document.getElementById("content-container");//获取容器子项var childernCount = container.children.length;//得到剩余的孩子var 剩余 = container.children.length % 3;if (childernCount > 3 && leftover === 1 ) {//条件//开始循环for (var i = 0; i < container.children.length; i++) {//删除最后一个孩子的类container.lastElementChild.classList.remove('article-card-container');}//在最后一个孩子上添加一个新类container.lastElementChild.classList.add('article-card-container-100');}};

我使用 leftover === 1 进行测试，因为甚至还有 2 个项目剩余，leftover > 0 会导致问题.

这个函数的问题是我必须编写要分配的新类(包括内部元素的所有子类=大量代码).

使用 if 语句中的第一个条件，因为即使只有两个元素，modulus 也返回 1.

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

感谢您的任何建议或提示，使其变得更好

解决方案

lastElementChild和lastElementChild.previousElementSibling的flex必须设置到 1 如果 leftover===2

window.onload = function alignLeftovers() {var container = document.getElementById("content-container");var childernCount = container.children.length;控制台日志(childernCount)；var 剩余 = 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 {显示:弹性；flex-wrap: 包裹;}.article-card-container {宽度:33.3333%；填充:9px；背景:红色；边框:2px 实心 #fff;box-sizing: 边框框；}

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

.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

解决方案

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>

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