Изменение ширины элементов с 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%, кроме последнего, если оно нечетное.