.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;属性和更改(删除和添加)其价值,避免写全新的类?
感谢任何建议或提示,以使其更好
答案 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-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,这也将是最后一个。
Stack snippet
.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;