Где я накосячил с флексами?

Question

[Евгений]

Суть в том, что допустим в флекс контейнере есть n-элементов и изначально их 3 , при уменьшении ширины 2, а потом вовсе 1.

Вот флекс-контейнер

.content-catalog__items
{
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: 10px;
    padding-left: 10px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;
}

А вот флекс элемент

.content-catalog__items .content__new-products__item
{
    flex:  1 1 240px;
    margin-bottom: 20px;
}

Но когда допустим количество элементов несимметричное , например если в флекс контейнере 9 элементов, то когда я сдвигаю флекс до 2 элементов в строке, одному не будет пары.

Так вот его начинает расплющивать на всю ширину флекс контейнера ( Мой пример на скрине)


Можно ли как то сохранив коэф. растяжения сделать, чтобы его так не плющило?

Answer 1

[Ankhena]

Для таких случаев добавляют еще несколько (сколько зависит от того сколько элементов может не хватать до целой строки) пустых элементов с нулевой высотой.
Если таких элементов нужно добавить всего 1 или 2, как в вашем случае, то можно обойтись псевдоэлементами.

https://jsfiddle.net/mdeoxjb6/

Comments

[Евгений]

Пустой элемент нужно добавлять только при уменьшении количества элементов в строке?

[Ankhena]

Евгений, в смысле хотите на js?
Не вижу смысла.

На js тогда уж не элементы добавлять, а ширину считать.

Но лично я бы для этой задачи пользовалась media условиями и меняла бы ширину 33.3333%, потом 50%, потом 100%. При justify-content: flex-start (значение по умолчанию)

Хак с дополнительными блоками нужен для space-between и space-around. У вас space-around хоть и написан, только не понятно зачем он написан при flex-grow:1.

[Евгений]

Ankhena, В общем я добавил ещё один блок в конец , но с путым содержимым и убран лишнее в нём через

.content-catalog__items .content__new-products__item:last-child
{
    padding: 0;
    border: none;
}

Вроде как работает) Спасибо

[Ankhena]

Евгений, лучше псевдоэлементом, чем лишний блок

Answer 2

[Alfieros]

flex: 0 0 240px; / flex: 0 1 240px;

1)https://jsfiddle.net/po9n4tya/
2)https://jsfiddle.net/po9n4tya/1/

Comments

[Евгений]

Вы в обоих случаях поставили коэф растяжения 0. Это не мой случай

[Alfieros]

Евгений, тогда задайте блоку min и max-width

[Евгений]

Alfieros, Походу придётся костылить через min max width (

[Alfieros]

Евгений, это не костыль, а правильное решение. Чтобы избавиться от дальнейших косяков с адаптивностью блока. Если вам нужно чтобы сам блок растягивался а элемент внутри позиционировался в центре, тогда просто добавьте карточке товара display: flex и justify-content: center;

Answer 3

[houd1ini]

Как вариант вам нужно ограничивать максимальную ширну блока, так же можно писать ширину блоков, можно поиграться с медиа запросами. Например:

.content-catalog__items .content__new-products__item {
  max-width: 240px;
}

// Или

.content-catalog__items .content__new-products__item {
  flex-basis: 50%;
  width: 50%;
  //на медии менять процентаж
}