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

#html #css #css3 #flexbox

Подскажите, как правильно настроить блок, чтобы можно было расположить элементы с
1 по N снизу вверх:   



.objects {
  height: 100vh;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
}

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





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

А хотелось бы наоборот - чтобы в самом низу был второй, а над ним первый.

Как это можно правильно реализовать без дополнительных блоков и т.п.?
    

Ответы

Ответ 1

Для такого подойдёт свойство 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;
}

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



Ответ 2

html, body, .objects {
  margin: 0;
  height: 100%;
}

.objects {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.object:first-child {
  margin-top: auto;
}

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