Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?

Question

[nikmil]

Как добиться такого поведения блоков?
Если 2 блока в колонке, то они делят ширину пополам.
Если 3 блока, то первые 2 делят ширину по полам, а 3 переходит на новую строку и занимает всю ширину?

У меня может быть различное кол-во этих блоков.

Answer 1

[imko]

Ребята зачем nth-childы
https://codepen.io/herr-imko/pen/vYMwaqz

Comments

[szQocks]

ну хоть что-то интересное написал, а то обычно о тебя ничё путёвого не дождёшься) либо игнор,либо чушь) а тут прям хороший вариант)

[Сергей delphinpro]

Все хорошо, только

flex-basis: 50%;
box-sizing: border-box;

Answer 2

[0xD34F]

Дефолтная ширина блока половина, а для :nth-child(odd):last-child полная. Типа так.

Answer 3

[nikmil]

Пока сидела, нашла сама решение xD

Answer 4

[alexalexes]

Используйте flex и nth-child на кастомизацию по порядку идущих элементов.

Comments

[Сергей delphinpro]

.item:nth-child(3) - это хардкорное решение. А если элементов будет пять или семь?

[alexalexes]

Сергей delphinpro. Автор не просил n-ое кол-во элементов.
А так, пожалуйста:

.item:nth-child(3n)
{
}
.item:nth-child(3n+1)
{
}
.item:nth-child(3n+2)
{
}

[Сергей delphinpro]

alexalexes, в заголовке вопроса написано " чтобы блоки занимали половину доступной ширины, а последний нечётный". Про три блока там не написано.

Да и вообще, верстка – это всегда ориентирование на неизвестное количество контента.

[Сергей delphinpro]

alexalexes, в заголовке вопроса написано " чтобы блоки занимали половину доступной ширины, а последний нечётный". Про три блока там не написано.

Да и вообще, верстка – это всегда ориентирование на неизвестное количество контента.

[nikmil]

alexalexes, "У меня может быть различное кол-во этих блоков."

[alexalexes]

Отмасштабировал.

.item:nth-child(2n-1)
{
   background-color: red;
}
.item:nth-child(2n-2)
{
   background-color: yellow;
}
div.item:last-child /* добавил div, чтобы увеличить вес последнего селектора */
{
   flex-basis: 100%;
   background-color: green;
}

Различное - это я трактовал так. В каком-то случае - один, в другом - два, в третьем - три.
Точнее было бы "не ограничено тремя".