Почему не работает вертикальное выравнивание через псевдоэлемент?

Question

[sinevik]

https://jsfiddle.net/zLe1q5y4/
Подскажите почему блоки не выравниваются вертикально? Раньше вроде работало сейчас нет

Answer 1

[Anton Filippov]

обязательно использовать такой древний ужасный хак?
Если нет, то вот вариант покрасивее(в плане организации и очевидности кода): https://jsfiddle.net/zLe1q5y4/2/

spoiler

P.S. id в css никогда не используйте, только классы.

Comments

[sinevik]

А где можно подробно про эти флексы почитать? Компактную хорошую статью

[Anton Filippov]

sinevik, flexboxfroggy.com/#ru
пробегите эту игрушку и суть поймете :)
после этого можете уже с пониманием сути свойств поиграться в этом замечательном плейграунде https://codepen.io/enxaneta/full/adLPwv

[Dima Polos]

sinevik, вот, не поленитесь найти время и посмотрите: https://www.youtube.com/watch?v=hrFPD0nkRVA&list=P...
Я даже платные курсы проходил, очень толковые!

Answer 2

[FreshMilk]

Свойство vertical-align не работает для float элементов, т.к. они выпадают из общего потока документа.

Comments

[sinevik]

И что эту задачу можно только с помощью flex решить?

[FreshMilk]

sinevik, если последний элемент у которого float: right необязательно должен быть справа, то просто убираете везде свойство float и выравнивание будет работать.