Страницы

Поиск по вопросам

понедельник, 8 апреля 2019 г.

css: расположение элементов снизу вверх с использованием flex

Подскажите, как правильно настроить блок, чтобы можно было расположить элементы с 1 по N снизу вверх:
.objects { height: 100vh; display: flex; flex-direction: column-reverse; flex-wrap: nowrap; }

первый
второй

Но при таких стилях блоки выводятся снизу вверх (всё ок), но блок первый оказывается в самом низу, а второй - выше.
А хотелось бы наоборот - чтобы в самом низу был второй, а над ним первый
Как это можно правильно реализовать без дополнительных блоков и т.п.?


Ответ

Для такого подойдёт свойство justify-content: flex-end вместо flex-direction: column-reverse. (justify-content выравнивает по вертикали, align-items выравнивает по горизонтали)
.objects { height: calc(100vh - 16px); display: flex; flex-direction: column; justify-content: flex-end; flex-wrap: nowrap; }

первый
второй

Комментариев нет:

Отправить комментарий