Как быть с хвостами флексбоксов?

Question

[Алексей Бурлака]

Всем привет!

Хочу, чтобы плитки в контейнере:
- были резиновыми;
- не были шире определённого значения;
- образовавщееся свободное место (из-за ограниченной ширины) равномерно распределялось между ними.

На флексах всё норм делается кроме хвостов.
Например, флекс расставляет конечные плитки так:

...а мне нужно так, как в гридах:


--- jsfiddle ---
Подскажите, как выйти из положения?

Comments

[Сергей delphinpro]

а мне нужно так, как в гридах

используйте гриды

Answer 1

[Алексей Бурлака]

Придумалось необычное решение. Нужно добить хвост элементами-пустышками.

jsfiddle

В количестве
L — 2
где L — количество элементов в списке
«минус два», потому что когда в хвосте один элемент, он корректно прижимается к левому краю, а вот когда их в хвосте уже два, тогда возникает смещение.

Можно скриптом после загрузки страницы, можно при создании страницы на бекэнде (всё-равно програмно генерятся элементы на странице, длина списка известна).

Comments

[cssfish]

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

https://jsfiddle.net/1om4vr9a/6/

https://jsfiddle.net/45v1uarz/3/

[Алексей Бурлака]

cssfish,
+1 =)

Answer 2

[Astrohas]

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

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

как то так. Но тут проблема в том что верхние элементы растягиваются по ширине, а нижние нет и пропадают отступы, так что если вид последней строки критичен, юзайте inline-block вместо flex

Comments

[cssfish]

согласен, для такой бодяги float или inline-block - за глаза

[Алексей Бурлака]

cssfish, Подскажите, как вы решаете флоатом или инлайн-блоками момент
«образовавщееся свободное место (из-за ограниченной ширины) равномерно распределялось между ними»

[cssfish]

тут у вас задача сформулирована нечетко. разберем:

1.

были резиновыми;

не были шире определённого значения;

по сути... они резиновые только при малой ширине окна, далее задача превращается в расстановку блоков фиксированной ширины.

2.

образовавшееся свободное место (из-за ограниченной ширины) равномерно распределялось между ними

А тут неясно, надо ли сохранять некое количество "колонок" (например 3, как в скрине) или позволять блокам напихиваться в строки до упора. Если исходить из скринов - 3 колонки - соответственно неважно делаем их float или inline-block ( в режиме text-align:left), шириной 33%, а уже вложенные блоки центрируем внутри этих "колонок". Получатся резиновые отступы. Вот это-то я и имел ввиду в ответе.
(+ придется media писать, чтоб контейнеры 33% превращать в 100% при малой ширине).

https://jsfiddle.net/mLye8nxo/4/
https://jsfiddle.net/nmq9wmxL/1/

А вот если надо надо не в 3 колонки а "сколько влезет", то тут только inline-block+justify, а он вам даст результат как в первой картинке.
https://jsfiddle.net/45v1uarz/1/

Т.е. - не выйдет. Только если задачу как-то переформулировать.

Answer 3

[zompin]

Лучше оберните каждый item в контейнер, и отступы между item'ами делайте паддингами в этих контейнерах, так вы решите данную проблему, даже без display:flex и независимо от количества элементов.