Как сделать space-between выравнивание для нечетного количества элементов?

Question

[CAMOBAP4UK]

Добрый день. Как мне сделать что бы удалить лишний div card__item (2 я строка 3ий столбец) что бы при этом 5ый по счету блок не уходил в право ?
https://codepen.io/camobap6/pen/zYrxoZx
То есть нужно удалить последний див , что бы все осталось на своих местах.

Answer 1

[Ankhena]

Использовать гриды.

Для флекса делают костыль в виде нужного количества пустых блоков. В вашем случае достаточно псевдоэлемента https://jsfiddle.net/7q2ptxz4/

Еще можно не делать space-between, а расcчитывать margin и отрицательные и у родителя.

Comments

[CAMOBAP4UK]

C таким еще не сталкивался. Можно по подробней ?

[Ankhena]

CAMOBAP4UK, подробнее: пустые элементы, без рамок и прочего, только ширина такая же как у остальных элементов. В количестве n-1. Где n это максимальное число элементов в строке.

Если у вас фиксированные размеры, то проще избавится от space-between и задавать марджин через nth-child.
.item:not(nth-child(3n)) {margin-right: 30px}
(число от балды)

Но лучше гриды ;)

[CAMOBAP4UK]

Спасибо , будем читать.

[Ankhena]

CAMOBAP4UK, так с псевдоэлементом https://jsfiddle.net/7q2ptxz4/

[CAMOBAP4UK]

Ankhena, Очень интересно , спасибо

Answer 2

[g33km]

Как вариант, немного переписать код

.card {
justify-content: flex-start;
}

.card__item:nth-child(3n-1) {
  margin: 60px 10.589% 0 10.5%;
}

Не знаю, на сколько грамотно так делать, но суть такова, что блоки будут распределяться по родительскому контейнеру не за счет justify-content, а за счет того, что каждый центральный блок каждой строки будет толкать блоки слева и справа от себя. Значения margin подгоняются вручную, исходя из размеров самих блоков и контейнера-родителя.

Comments

[CAMOBAP4UK]

попробуем