Как равномерно распределить карточки на странице?

Question

[Александр Nameless08]

Есть задача распределить блоки равномерно в линиях. То есть: край первого по левому краю контейнера, край последнего по правому краю контейнера. Остальное место распределяется между блоками равномерно. Конечно, сразу же напрашивается: flexbox + justify-content:space-between. Как раз то, что нужно, но есть пара моментов, которые всё портят:

1. Если блока 2 то:


Есть конечно вариант обойти с помощью проверки количества (т.к. у меня в ряд 3, то всё, что <3, другой класс), но этот вариант не учитывает второй случай:

2. А если блоков 5:


Я конечно понимаю, что можно мудрить с отрицательными отступами. Но может есть что-то красивее?

Answer 1

[r_mustang]

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

https://codepen.io/ из https://stackoverflow.com/

Comments

[Александр Nameless08]

Сейчас этот вариант испытаем!

[Александр Nameless08]

К сожалению расстояния между карточками пропадают. В примере там padding использовался. Как вариант в принципе можно, но это опять же через отрицательные выходит, чтобы карточки прилегали к краю как контент в других контейнерах

[Александр Nameless08]

Александр Nameless08, либо расширять контентную область и делать padding у остального контента тоже такой-же. Это все решения в принципе, думал можно не затрагивать весь остальной сайт и просто решить через flex

[r_mustang]

Александр Nameless08 как вариант можете использовать css grid, поддерживается так же хорошо, как и flex. Вот пример: https://stackoverflow.com/

Answer 2

[Андрей]

Я бы добавил каждой карточке отступ справа, кроме последней.
Было бы что-то вроде:

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    margin-right: 25px;
}

.card:last-child {
   margin-right: 0;
}

Comments

[Александр Nameless08]

Это не прокатит, тогда надо каждой третий обнулять отступ, либо делать обертку по три блока. А потом на медиазапросах скидывать на второй, короче, не элегантно ))

[lamer350]

Александр Nameless08, так я так и не понял что мешает каждому 3-му сбрасывать отступ? Религия или что?

[Александр Nameless08]

lamer350, или что. Выше написано, что надо будет в медиазапросах переопределять на каждый второй, да? Или что? И тут есть такой момент. Это в данном примере 3 карточки. А следующий сайт старт от 1920 по 6 штук и до 320, то есть мне надо будет сначала каждый 6 потом каждый 5 потом 4.. верно? Или что?

[lamer350]

Александр Nameless08, для того и придумали медиа запросы) Но если уж на то пошло, я вижу что у вас по краям есть так же отступы, переверстайте это так чтобы можно было использовать: margin: 0 10px; тоисть отступ был справа и слева по 10 пикселей (примерно, я так и не понял какой у вас отступ сейчас). Тогда сколько бы у вас блоков не было - всегда отступы будут равномерные.

[lamer350]

Александр Nameless08, а про меди запросы, если вы имели ввиду именно обнуление. Например для (width-max: 1800px) nth-child(6n+6), а для (width-max: 1600px) nth-child(5n+5), а nth-child(6n+6) уже придется вернуть отступы и тд.
То просто надо все эти обновления использовать с медиа-запросом: (width-min: 1601px) & (width-max: 1800px), (width-min: 1401px) & (width-max: 1600px) и тд. И тогда они не будут пересекаться вообще, проблем не будет

[Александр Nameless08]

lamer350, ну да. По сути все, что тут написали это решения. Я просто надеялся что есть что-то заложенное во flex, чтобы задать space-between и было все ровно, но сейчас сам понимаю, что это не возможно, без каких-либо доп манипуляций ))

[Александр Nameless08]

Но первый вариант что-то новенькое, для меня по крайней мере:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

[lamer350]

Александр Nameless08, ну я в первом сообщение вам написал, вы просто неправильно используете отступы. этот метод что я вам описал используется во всех сетках стандартом, в том же бустрапе. Когда отступ между блоками делится на пополам и вместо magin-right: 20px используется magin-right: 10px и magin-left: 10px и вообще никогда никаких проблем не будет

[Александр Nameless08]

lamer350, ну я что-то и правда не дооценил, в принципе вполне приемлемо, и даже почти ничего не переопределяется:

@media screen and (min-width: 961px){
  .th-prodcard-prev-item:nth-child(3n){
    margin-right: 0;
  }
  .th-prodcard-prev-item {
    margin-right: 2.9%;
  }
}

@media screen and (min-width: 641px) and (max-width: 960px){
  .th-prodcard-prev-item {
    margin-right: 2%;
  }
  .th-prodcard-prev-item:nth-child(even){
    margin-right: 0;
  }
}

@media screen and (max-width: 640px){
  .th-prodcard-prev-item {
    margin-right: 0;
  }
}

Answer 3

[Михаил]

А если проверку чуть модернизировать? Если количество карточек не делится без остатка на 3, то разбивать на блоки по 3 карточки, а остаток размещать по-другому.

Кроме того, если не обязательно привязываться к краю контейнера, есть отличное свойство
justify-content: space-evenly;
которое точно распределит карточки по всему контейнеру с одинаковыми расстояниями

Comments

[Александр Nameless08]

С деление к сожалению тоже не прокатит т.к. надо отталкиваться от краев