Jump to content
  • 0

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


volshebnyi
 Share

Question

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

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

Annotation_2019_01_22_154147.jpg

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

http://jsfiddle.net/osfkzpvy/

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 1

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

Link to comment
Share on other sites

  • 1

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

P.S.

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

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

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

Link to comment
Share on other sites

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

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

Почему же?

Link to comment
Share on other sites

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

Почему же?

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy