Flex-end 不会将视图一直推到底部答案

【问题标题】：Flex-end does not push a view all the way to the bottomFlex-end 不会将视图一直推到底部
【发布时间】：2020-08-30 07:51:05
【问题描述】：

我正在尝试使用弹性框在屏幕底部放置一个视图。

我有一个HomeScreen（包含按钮），HomeScreen 组件被设置在App.js NavigationContainer。

我将HomeScreen 设置为display:"flex" 并将HomeScreen 本身设置为flex: 1，但是，当我将FloatingButton 设置为alignSelf: "flex-end" 时，它不会转到屏幕底部。

这是一个小吃链接，相关代码：https://snack.expo.io/VVQZAPoej

现在是这样的：

我将背景设置为暗，所以我可以看到HomeScreen 确实占据了整个屏幕高度。

【问题讨论】：

【解决方案1】：

在标准 CSS 中，默认的 flex-direction 是 row。但是在 React 中默认是column。

因此，沿交叉轴运行的align-self 正在尝试水平移动您的按钮。你需要它垂直移动。

切换到行方向，使用auto 边距，或使用justify-content: space-between。

参考资料：

【讨论】：