Как выровнять последний блок во flexbox в примере?

Question

[Sulin]

Добрый день.

есть пример.

1. Как сделать так что бы пятый элемент был под вторым, а не там где сейчас?
2. Есть ли возможность через fkexbox задать расстояние между строками элементов, не имея фикс. высоты у контейнера? сейчас там просто margin-bottom у каждого элемента, нижние соответственно этим отступом изменяют размер родителя снизу.

Answer 1

[Дима Паутов]

1) Уберите space-between и будет под 2м иначе никак
2) Нет

Comments

[Sulin]

space-between нельзя, нужно что бы на 100% родителя по ширине было.

[Дима Паутов]

Sulin: Ну иначе никак

Answer 2

[Sulin]

у меня напрашивается вывод.

даже сейчас flexbox создаёт проблемы в некоторых моментах (тот же float справился бы с ситуацией расположения блоков в примере, flexbox не кроссбраузерный, хромает IE сильно и хромает тот же андроид (стандартный браузер) версий 4.0 - 4.3 который занимает процентов 25% от всего андроида chezasite.com/android/android-stat-march-2016-9207...)

почему же flexbox так пиарят если на практике его даже сейчас сложно использовать хоть как-то....

Answer 3

[TheBububo]

тот же float справился бы с ситуацией расположения блоков в примере,

Вам бы пришлось добавлять margin. Что мешает убрать space-between, добавить margin и работать как с float?

flexbox не кроссбраузерный, хромает IE сильно и хромает тот же андроид

Можете использовать float вместе с флксбоксами. Если флексбоксы не поддерживаются, подхватится float. Если флексбоксы поддерживаются, то float игнорируется.

А вообще, флексбокс очень полезен когда надо делать колонки одинаковой высоты, зависящей от контента а внутри этих колонок выравнивать блоки по вертикали. Вот пример https://jsfiddle.net/z7g1byf1/

Comments

[Sulin]

Вам бы пришлось добавлять margin. Что мешает убрать space-between, добавить margin и работать как с float?
=== вот и возникает вопрос зачем тогда flexbox вообще.

Можете использовать float вместе с флксбоксами. Если флексбоксы не поддерживаются, подхватится float. Если флексбоксы поддерживаются, то float игнорируется.
=== ну если float будет игнорироваться при поддержке флексбокса, то отступы будут и при флексбоксе. и снова возникает вопрос зачем использовать штук 5 свойств флекбокса и ждать багов в старых браузерах когда тоже самое делает одно свойство float.

[TheBububo]

У flexbox всё-таки гораздо больше возможностей. Если вашу задачу можно легко решить с float - пожалуйста, используйте float, Он ведь не считается устаревшим. Но есть другие задачи, которые без флексбокса решаются "некрасиво" или не решаются. Одну из таких я привел выше. А баги в старых браузерах - дело времени

[Sulin]

а какой смысл решать задачу приведенную вами через flexbox и еще потом ковырятся с багами в IE и в том же андроиде 4.0 - 4.3, не лучше уже и эту задачу сделать "некрасиво" но зато кроссбраузерно ?

[Sulin]

я не имею ничего против flexbox, я бы с радостью на него перешёл и пользовался, но как им можно пользоваться исходя из вот этих его недочётов на данный момент. кроме как ждать еще с год пока вымрут старые браузеры и версии андроида как вариант...

[TheBububo]

Если посмотреть на caniuse поддержка + частичная поддержка составляет 94% в мире и 84% в России. Для каких-то проектов это вполне приемлемо.

Answer 4

[blolg]

1. необходимо убрать justify-content: space-between и элементам добавить соответствующие отступы слева и справа.
2. такой возможности нет. в качестве решения могут быть вот эти два варианта https://jsfiddle.net/6rz591sk/ и https://jsfiddle.net/rtyto1mg/

Comments

[Sulin]

спасибо за примеры. первый вариант более жизнеспособный как по мне. но все же возникает вопрос есть ли смысл в таких извращениях если проще (данный пример уж точно) реализовать без flexbox.

[blolg]

Sulin: Да, такой пример можно было бы реализовать и на float, однако он будет работать только в том случае, если у элементов окажется равная высота, иначе всё поедет. Кроме того, при помощи flexbox можно автоматически сделать равную высоту у элементов или сделать выравнивание по вертикали.

[Sulin]

ну у тех же флоатов можно сделать что бы не было проблем с высотами например через :nth-child(3n+1){ clear: both; }. я думаю разная высота не помеха.

[blolg]

Sulin: это если всегда 3 элемента, а если больше или меньше, то переопределять? такой вариант тоже вполне может быть, но на мой вкус он выглядит менее гибким что ли.
И опять таки при помощи float не получиться автоматически установить равную высоту у элементов или сделать выравнивание по вертикали.
Я не понимаю, чем реализация на flexbox сложнее, чем на float?

[Sulin]

да, у float свои минусы есть. flexbox думаю не сложнее, меня больше настораживает что flexbox не кроссбраузерный.