如何在Flexbox末尾的另一个“ div”中设置最后一个“ div”？

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;
    }

 <div class='Section'>
        <h1>List </h1>

        <div class="form-group">
            <input />
        </div>

        <pre class="currentPage"></pre>
        <section class='todos'>
            <ul>
                <li >
                    <a></a>
                </li>
            </ul>
        </section>

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

我想使用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;
}