justify-content: space-between - выравнивание элементов в нижнем ряду

[volshebnyi]

Здравствуйте!

Подскажите, пожалуйста, как избежать такой картины при justify-content: space-between:

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

http://jsfiddle.net/osfkzpvy/

[mrnobody]

Можно с помощью гридов сделать

http://jsfiddle.net/mrnobody/2mn4kcj9/4/

[spdif]

Однозначно Grid для данного примера. 

...

[AlexZaw]

div.products-list a:last-child{
 margin-right: auto;
 margin-left: 5%;
}

Плюс можно js подключить, если количество элементов меняется. И никаких гридов :)

[SelenIT]

Грибы предназначены для выстраивания элементов по сетке:). Каркас сайта часто представляет собой сетку, поэтому гриды подходят для него лучше всего остального. Но это не значит, что они предназначены *только* для каркаса и не годятся для других сеток (а тут — именно сетка, хоть и гибкая).

[SelenIT]

В задаче требуется вертикальная связь между элементами в колонках. Гриды дают ее «из коробки». Флексбоксы (в т.ч. псевдосетки на них а-ля Бутстрап) могут до некоторой степени *имитировать* ее, но цена этого — потеря гибкости (в которой главная сила флексбоксов).

Вот если вертикальные связи не нужны, а нужно наоборот гибкое заполнение места по горизонтали независимо от соседних рядов (что «из коробки» делают флексбоксы) — вот туда пихать гриды было бы глупо, тут я бы согласился. Флексбоксы и гриды дополняют друг друга, где у одних слабость — у других сила, и наоборот:)

[Vlad_P]

Если кол-во блоков фиксировано, задайте одному margin-left:auto, другому margin-right: auto. Если нет - создавайте для них отдельную строку

[Vlad_P]

гриды могут все

[AlexZaw]

20 часов назад, volshebnyi сказал:

Как вы избегаете такую проблему?

Вы уверены что расстояние между элементами и размер самих элементов должен изменяться при изменении ширины экрана?
Мне кажется ваша проблема решается простым использованием любой сетки. Т.е. при изменении ширины экрана размеры элементов меняются, до определенной степени, а расстояние между элементами остается неизменным

[volshebnyi]

24.01.2019 в 09:57, AlexZaw сказал:

div.products-list a:last-child{
 margin-right: auto;
 margin-left: 5%;
}

Плюс можно js подключить, если количество элементов меняется. И никаких гридов ?

А почему вы так против гридов? Из-за поддержки?

[AlexZaw]

11 часов назад, volshebnyi сказал:

А почему вы так против гридов? Из-за поддержки?

Да я не против, просто гриды, в основном, предназначены для построения скелета сайта, а не для выравнивания отдельных элементов :)

[AlexZaw]

1 час назад, SelenIT сказал:

Но это не значит, что они предназначены *только* для каркаса

А я и не говорил, что гриды ТОЛЬКО для каркаса, я, говорил - "в основном". Да и глупо использовать грид для выравнивания карточек товара и т.п., не находите?

P.S.

1 час назад, SelenIT сказал:

Грибы предназначены

Вот это опечатка меня чуть не убила :)

[volshebnyi]

Только что, AlexZaw сказал:

А я и не говорил, что гриды ТОЛЬКО для каркаса, я, говорил - "в основном". Да и глупо использовать грид для выравнивания карточек товара и т.п., не находите?

Почему же?

[AlexZaw]

Только что, volshebnyi сказал:

Почему же?

Потому, что, на мой взгляд, проще и быстрее использовать любую сетку (тем более что наверняка она где то еще используется на сайте) чем используя для этих  целей грид  расписывать поведение еще одной сетки. С гридами удобно менять порядок и расположение блоков вне зависимости от их порядка в разметке, для остального есть старые добрые флоаты и менее старые, но тоже добрые флексы :)

[volshebnyi]

Только что, AlexZaw сказал:

старые добрые флоаты и менее старые, но тоже добрые флексы ?

Но вот я и делал флексами, а возникла такая ошибка, из-за которой, собственно, и был создан этот пост. В моем случае кол-во элементов является динамическим. Вы рекомендовали подключать JS в таком случае. На мой взгляд, грибы (гриды) гораздо выгоднее в данном случае.

[SelenIT]

Грид — это и есть сетка. Гибкая и универсальная. «Сетки» а-ля бутстрапные .col-* и т.п. — на самом деле только имитация сетки для одного-двух частных случаев (а-ля 12 колонок фиксированной ширины), по сути костыли. Имхо, глупо скорее прикручивать костыли там, где задача просто и естественно решается без них...

[AlexZaw]

54 минуты назад, volshebnyi сказал:

Вы рекомендовали подключать JS в таком случае.

JS я рекомендовал только при использовании приведенного мной css кода. В случае использования любой сетки, например того-же бутстрапа, ваша проблема будет решена и никакого js и гридов не понадобится.

[AlexZaw]

28 минут назад, SelenIT сказал:

«Сетки» а-ля бутстрапные .col-* и т.п. — на самом деле только имитация сетки для одного-двух частных случаев (а-ля 12 колонок фиксированной ширины)

Не согласен с вами. Почему же эти сетки используют везде, а не только в "частных" случаях? Да и никто не запрещает использовать другие сетки, или вообще свою. К тому-же, гриды, по сути, как вы сами и сказали, это та же сетка, только более гибкая. ИМХО глупо использовать ее там где можно обойтись "костылями" на флоатах и флексах :)

Да, и почему вы считаете сетки отличные от гридов костылями? Таблицы тоже в костыли записать из-за того что все это можно гридами решить?

Нет, я согласен, гриды это хорошо, и даже замечательно, но не станете же вы их использовать для выравнивания элемента по центру если для этого можно использовать те-же флексы, например? Хотя в верстке ведь не существует однозначно правильных или неправильных решений :)

13 минут назад, SelenIT сказал:

В задаче требуется вертикальная связь между элементами в колонках.

margin-top/margin-bottom -не? Так же как и у гридов.

13 минут назад, SelenIT сказал:

Флексбоксы и гриды дополняют друг друга, где у одних слабость — у других сила, и наоборот:)

Вот тут согласен, хотя у флексов, насколько я помню, есть всего один недостаток перед гридами - это невозможность расположить один элемент в нескольких "рядах"

зы.с гридами просто мало дела имел, возможно у них есть и другие преимущества перед флексами