Flexbox flex-start 在 flex 容器中不起作用答案

【问题标题】：Flexbox flex-start does not working within flex containerFlexbox flex-start 在 flex 容器中不起作用
【发布时间】：2020-05-20 16:05:07
【问题描述】：

我是 Flexbox 的新手，主要使用 this tutorial 在线阅读了很多关于它的信息。目前，我正在尝试在反应原生应用程序上做一些非常简单的事情，但失败得很惨。在发布这个问题之前，我已经尝试了很多小时，并且已经没有想法了。希望有人能提供帮助。

想要的效果

参考下图，我希望红色框（我的徽标）与页面顶部对齐并水平居中，并希望绿色框在中心垂直和水平对齐。我不希望我的徽标将绿色框向下推。徽标只需要填充高度直到绿色框。我的徽标是 SVG，会根据高度自动缩放其大小。

这是我的尝试

 <View
        style={[
            {
                display: 'flex',
                width: '100%',
                height: '100%',
                backgroundColor: Colour.white,
                justifyContent: 'center',
            },
        ]}>
        <Logo style={{ flex: 1, alignSelf: 'flex-start', alignContent: 'center' }} />
        <Card
            containerStyle={{
                width: '85%',
                alignSelf: 'center',
                backgroundColor: Colour.white,
            }}>
            <Input placeholder="USERNAME" containerStyle={LoginStyles.usernameInput} />
            <Input preset="password" placeholder="PASSWORD" />
            <Text preset="link" style={LoginStyles.resetPasswordText}>
                RESET PASSWORD
            </Text>
        </Card>
    </View>

但是对于我的实现，它根本不起作用，看起来我可以水平对齐组件，但徽标没有出现在视图的顶部，并且直到卡片布局而不是推动卡片视图向下并以它为中心。我在某处读到默认情况下反应原生的弹性方向是列

真的希望有人能帮忙！尝试实现这一点浪费了很多时间

【问题讨论】：

谁能帮忙？

标签： css reactjs react-native flexbox react-native-android

【解决方案1】：

我不确定这一点，因为这是未经测试的代码，但如果您将卡设置为 flex:2 并将您的徽标设置为 flex:1，如果您的屏幕将被分成 3 部分，而您的卡占用 2 部分，会发生什么情况可用的 3 个“空间”！所以它将位于中心，您的徽标将占据顶部的 1 个“空间”

 <View
    style={[
        {
            display: 'flex',
            width: '100%',
            height: '100%',
            backgroundColor: Colour.white,
            justifyContent: 'center',
        },
    ]}>
    <Logo style={{ flex: 1, alignSelf: 'flex-start', alignContent: 'center' }} />
    <Card
        containerStyle={{
            flex: 2,
            width: '85%',
            alignSelf: 'center',
            backgroundColor: Colour.white,
        }}>
        <Input placeholder="USERNAME" containerStyle={LoginStyles.usernameInput} />
        <Input preset="password" placeholder="PASSWORD" />
        <Text preset="link" style={LoginStyles.resetPasswordText}>
            RESET PASSWORD
        </Text>
    </Card>
</View>

再一次......我没有测试过代码，但理论上它应该可以工作

【讨论】：