我们在我们的 Angular 2 应用程序中使用 flexbox 但我遇到了一个问题,一旦数据被加载,包含分页组件的 div 出现在数据下方,在第二个左右,数据仍在加载分页组件 float 到屏幕顶部。我想锁定分页组件的位置,这样用户就看不到该移动。这是分页组件的 css:
.pagination {
display: flex;
justify-content: flex-end;
}
我可以添加什么来强制它位于页面底部,这样它就不会在数据加载之前 float 到顶部?当我尝试添加 position: fixed
和 bottom: 0
时,它会覆盖其他 flex 定位并左对齐,而它应该是右对齐的。所以我想使用 flex 来做到这一点 - 而不是标准的 css。
所以,总而言之,我需要这个来强制右对齐,并对齐底部。
最佳答案
.pagination {
display: flex;
justify-content: flex-end;
align-items: flex-end;
align-content: flex-end;
}
flex 容器的初始设置是flex-direction: row
。这意味着主轴是水平的,justify-content
——它只在主轴上起作用——将水平对齐 flex 元素。
对于行方向容器中的垂直对齐,使用align-items
(对于单行容器,即nowrap
)和/或align-content
(对于多行容器,即 wrap
)
关于css - 使用flex强制将div对齐到页面的右下角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42703287/