如何解决Flex-end不会将视图一直推到底
我正在尝试使用flex box在屏幕底部放置一个视图。
我有一个HomeScreen
(包含按钮),HomeScreen
组件是在App.js
NavigationContainer
上设置的。
我将HomeScreen
设置为display:"flex"
并赋予HomeScreen
本身flex: 1
,但是,当我将FloatingButton
设置为alignSelf: "flex-end"
时,它不会转到屏幕底部。
这是一个带有相关代码的小吃链接:https://snack.expo.io/VVQZAPoej
这就是现在的样子:
我将背景设置为深色,因此我可以看到HomeScreen
确实占据了整个屏幕的高度。
解决方法
在标准CSS中,默认的flex-direction
是row
。但是在React中,默认值为column
。
因此,沿交叉轴运行的align-self
试图水平移动按钮。您需要它垂直移动。
切换到行方向,使用auto
边距,或使用justify-content: space-between
。
参考:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。