使用flex強制div對齊到頁面右下方

Question

我們在我們的Angular 2應用中使用flexbox，但是我遇到了一個問題：一旦數據加載後，包含分頁組件的div將出現在數據下方，第二個左右，數據仍在加載分頁組件的位置浮動到屏幕的頂部。我想鎖定分頁組件的位置，以便用戶不會看到該移動。這是分頁組件的CSS：

.pagination { 
    display: flex; 
    justify-content: flex-end; 
} 

我能加入，迫使這位置在頁面的底部，所以它不會浮到頂部的數據加載之前？當我嘗試添加position: fixed和bottom: 0時，它會覆蓋其他柔性定位並左對齊，當它應該是正確的。所以我想用flex來做到這一點 - 而不是標準的CSS。

所以，總結一下，我需要這個強制對齊，並對齊底部。

Answer 1

.pagination { 
    display: flex; 
    justify-content: flex-end; 
    align-items: flex-end; 
    align-content: flex-end; 
} 

---

柔性容器的初始設定是flex-direction: row。這意味着主軸是水平的，而justify-content –只能在主軸–上工作，將水平對齊flex項目。

對於行方向容器使用align-items垂直取向（爲一個單行容器，即nowrap）和/或align-content（對於多行的容器，即，wrap）