如果数组长度为奇数或偶数，则将元素的宽度从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％。