@evgen9586
Backend-dev. Лублу Enterprise и не люблю понты)

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

Суть в том, что допустим в флекс контейнере есть 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 элементов в строке, одному не будет пары.

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

Можно ли как то сохранив коэф. растяжения сделать, чтобы его так не плющило?
  • Вопрос задан
  • 123 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Для таких случаев добавляют еще несколько (сколько зависит от того сколько элементов может не хватать до целой строки) пустых элементов с нулевой высотой.
Если таких элементов нужно добавить всего 1 или 2, как в вашем случае, то можно обойтись псевдоэлементами.

https://jsfiddle.net/mdeoxjb6/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@houd1ini
Как вариант вам нужно ограничивать максимальную ширну блока, так же можно писать ширину блоков, можно поиграться с медиа запросами. Например:
.content-catalog__items .content__new-products__item {
  max-width: 240px;
}

// Или

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

Войдите, чтобы написать ответ

Похожие вопросы
22 нояб. 2024, в 19:51
15000 руб./за проект
22 нояб. 2024, в 19:15
200000 руб./за проект
22 нояб. 2024, в 18:50
30000 руб./за проект