Как установить последний div в другом div в конце flexbox?

Question

Как установить последний div в другом div в конце с изменяющимся количеством элементов в нумерации страниц? У меня 12 элементов. Во время нумерации страниц я установил количество элементов, например, 5, когда я на первой странице. Перейти на вторую страницу у меня 5 элементов. Перейти на третью страницу У меня есть два элемента, и здесь проблема, потому что

<div class =" pagination ">
    <ul uib-pagination>
    </ Ul>
</ div> 

движется вверх, и я бы хотел, чтобы он оставался на том же месте внизу <div class='Section'>

    .artistsSection {
      height: 100%; 
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      text-align: center;
      align-items: center;
    }


    .pagination {
      margin: 0;
      padding: 10px;
      font-size: 10px;
      display: flex;
      align-self: flex-end;
    }

 
        List 

        
            
        

Я хочу использовать flexbox.

Answer 1

Нет эквивалента для align-self на главной оси (например, justify-self).

Вместо этого вы можете сделать что-то вроде:

.Section {
  height: 100%; 
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}


.pagination {
  margin: 0;
  padding: 10px;
  font-size: 10px;
  display: flex;
  margin-top: auto;
}