Подскажите, как правильно настроить блок, чтобы можно было расположить элементы с 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;
}
первый
второй
Комментариев нет:
Отправить комментарий