FlexBox 对齐（拉伸）最后一个项目

Posted 2023-03-05

【中文标题】FlexBox 对齐（拉伸）最后一个项目

【英文标题】：FlexBox align (stretch) last Item

【发布时间】：2018-06-21 19:25:54

【问题描述】：

. 大家好，我正在尝试设置 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 选择器上获取“flex”属性并更改（删除和添加）其值并避免编写全新的类？

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

【问题讨论】：

不清楚你想达到什么，你能说明一下吗？

我正在创建 WP 主题和文章列表不同，并且行上的最大列数为 3。因为所有 flex 元素都将 flex 值设置为 1/3，所以我试图删除这个值并最后拉伸孩子到 100%

所以不需要 JS :) 简单的 CSS 就足够了

这是我第一次尝试提出问题，但我得到了否定点。有人可以解释为什么我的 Q 被否决了吗？

谢谢，但我现在知道要问更多问题，因为我不知道什么是好问题。我试图对 JS 代码进行排序，因为我没有在这里找到正确的答案，而且我被否决了。我知道有 100 种方法可以解决一个问题，但我不明白仅仅因为被问到就判断某人的问题。至少我总是试图帮助别人而不评判他们。所以对谁投反对票。不好意思问

【参考方案1】：

如果leftover===2，则必须将lastElementChild 和lastElementChild.previousElementSibling 的flex 设置为1

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>

【讨论】：

感谢您的回答我尝试了非常相似的 CSS 样式，它可以部分排序问题，我的意思是当剩余为 1 (4,7, 10 ....) 但如何排序情况在哪里剩下 2 篇文章（在 5、11 .. 文章场景中）这就是为什么我尝试将条件设置为 leftover === 1 的函数以 100% 对其进行测试，然后将 2 个剩余元素的规则设置为将弹性设置为 50%。有没有针对它的 CSS 解决方案？很抱歉，最初的问题不是很清楚

剩下2篇文章的时候，你想怎么对齐？

适合最后一行 50/50

这可以单独使用 CSS 来完成...检查我的答案

@LGSon 谢谢

【参考方案2】：

这只能通过 CSS 来解决，而且会比使用脚本更有效率。

它是通过组合nth-child/nth-last-child 和last-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 个，最后的兄弟选择器 + 将定位直接的兄弟，它也总是最后一个。

堆栈sn-p

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