如果数组长度为奇数或偶数，则将元素的宽度从 50% 更改为 100%

Question

我想在我的页面上显示一些元素（soundcloud 小部件）。

根据它们是odd 还是even，它们应该具有50% 或100% 宽度。

基本上我想满足的规则是：

-如果只有一个元素，则设为100%宽度

-如果有多个元素且数组长度为偶数，则使所有元素为50%

-如果数组的长度是奇数，则将除最后一个以外的所有部分设为 50%，将最后一个设为 100% 宽度。

我正在使用哈巴狗，但不知道如何做到这一点。甚至 flexbox 也可以在这里提供帮助？

这是我的代码，w-50 类现在将元素设置为 50%：

    each link in soundcloudEmbedableLinks
      .pb4.w-50.dib.pa2!=link

这就是它现在的样子，全部设置为 50%.. 但正如我所说，我确实希望它符合我上面所说的规则。

谢谢

Answer 1

CSS：

.myBox {
    width:50%;
}
.myBox:last-child {
    width:100%;
}
.myBox:nth-child(even) {
    width:50%;
}

第一条规则将默认设置为 50%，第二条将最后一个子设置为 100%，第三条将覆盖第二条规则并将最后一个设置回 50%，如果它是偶数。这意味着除了最后一个，如果它是奇数，所有的盒子都将是 50%。