css - 你如何在最后一个 '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;
    }

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