Javascript FlexBox对齐（拉伸）最后一项

.大家好，我正在尝试将Javascript函数设置为对齐（拉伸）FlexBox中的最后一个子项。 在我打开的行中最多显示三列。物品卡片容器设置

flex:1计算（100*（1/3））

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



这是我的解决方案，正在发挥作用，但

window.onload=函数alignLeftovers（）{
//使用FlexBox获取容器
var container=document.getElementById（“内容容器”）；
//获取容器子对象
var childernCount=container.children.length；
//吃剩的孩子
var leftover=container.children.length%3；
如果（childerCount>3&&leftover==1）{//条件
//起动回路
for（var i=0；i


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

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

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

纯JavaScript中是否有更好的解决方案（我是JS新手）如何在最后一个子类
上使用article card container
选择器获取“flex”属性并更改（删除和添加）其值，避免编写全新的类

感谢您提供的任何建议或提示，使其变得更好
如果
剩余===2，您必须将
lastElementChild
和
lastElementChild.previousElementSibling
设置为
1


window.onload=函数alignLeftovers（）{
var container=document.getElementById（“内容容器”）；
var childernCount=container.children.length；
console.log（childerCount）；
var leftover=container.children.length%3；
如果（childerCount>3&&leftover==1）{
container.lastElementChild.style.flex=“1”
}else if（childerCount>3&&leftover==2）{
container.lastElementChild.style.flex=“1”
container.lastElementChild.previousElementSibling.style.flex=“1”
}
};
#内容容器{
显示器：flex；
柔性包装：包装；
}
.物品卡容器{
宽度：33.3333%；
填充：9px；
背景：红色；
边框：2倍实心#fff；
框大小：边框框；
}
这只能用CSS来解决，而且比使用脚本要有效得多

通过组合第n个子项
/
第n个最后一个子项
和第
最后一个子项
选择器来完成，并将处理任意数量的项目，从1个项目开始

它是这样工作的，当
nth-*
和
last-child
选择器同时匹配一个元素时，规则生效

例如，
：第n个子元素（3n+1）：最后一个子元素
规则将针对每3个元素，从第1个开始，然后是第4个、第7个，依此类推，如果它也是最后一个，则选择最后一行的任何单个元素

：第n个子元素（3n+1）：第n个最后一个子元素（2）
将执行相同的操作，但如果它是第2个元素，则选择它，这意味着最后一行有2个

最后一个同级选择器
+
将以直接同级为目标（如果有2个），这也将始终是最后一个

堆栈片段


.content容器{
显示器：flex；
柔性包装：包装；
}
.物品卡容器{
宽度：33.3333%；
填充：9px；
背景：红色；
边框：2倍实心#fff；
框大小：边框框；
}
/*如果每三次，从第一次开始，也是倒数第二次+倒数第二次*/
.物品卡片容器：第n个子（3n+1）：第n个最后一个子（2），
.物品卡片容器：第n个子（3n+1）：第n个最后一个子（2）+物品{
宽度：50%；
}
/*如果每三次，从第一次开始，也是最后一次*/
.物品卡片容器：第n个子（3n+1）：最后一个子{
宽度：100%；
}
/*用于演示样式*/
.content容器+.content容器{
边缘顶部：20px；
}

不清楚您想要实现什么，您能举例说明吗？我正在创建WP主题，文章列表不同，第行的最大列数为3。因为所有的flex元素都将flex值设置为1/3，所以我所做的就是将这个值移除，并将最后一个孩子拉伸到100%，所以不需要JS：）简单的CSS就足够了，这是我第一次尝试问问题，我得到了否定的一点。有人能解释为什么我的Q被否决了吗？谢谢，但我现在知道要问更多的问题了，因为我不知道什么是好问题。我试图对JS代码进行排序，因为我在这里没有找到正确的答案，我已经投了反对票。我知道有100种方法可以解决一个问题，但我不理解仅仅因为有人问了问题就评判一个人。至少我总是尽力帮助别人而不去评判他们。那么谁投了反对票呢。我很抱歉问汉克斯我已经尝试了非常相似的CSS样式，它可以部分排序问题，我的意思是当剩余是1（4，7，10…），但如何排序的情况下，有2篇文章剩余（在5，11…文章的情况下）这就是为什么我尝试将带有条件
leftover===1
的函数设置为100%以测试它，然后为2个leftover元素设置规则以将flex设置为50%。有没有CSS解决方案？我很抱歉没有完全清楚最初的问题当剩下两篇文章时，你想如何对齐它们？为了适应最后一行50/50这可以单独使用CSS来完成。。。检查我的answer@LGSon非常感谢。