css - alignItems: 'flex-end' が正しく機能しない (ページ全体をカバーしていない) - ネイティブに反応する

Question

私のホームページには、flex で配置した 4 つのボタンがあります。親の flex: 1 を設定しました。これは、ページ全体をカバーしていることを意味します (backgroundColor で確認しました)。私の問題は、alignItems: 'flex-end' を設定すると、フレックスがページの半分だけをカバーしているかのように、ボタンが少しだけ下に移動することです。

これが私のコードのマークアップです:

<Card style={styles.cardStyle}>
      <CardSection style={styles.containerStyle}>
        <Button onPress={() => navigate("NewScreen")}>
          New
        </Button>
      </CardSection>

      <CardSection style={styles.containerStyle}>
        <Button onPress={() => navigate("SavedScreen")}>
          Saved
        </Button>
      </CardSection>

      <CardSection style={styles.containerStyle}>
        <Button onPress={() => navigate("ParametersScreen")}>
          Settings
        </Button>
      </CardSection>

      <CardSection style={styles.containerStyle}>
        <Button onPress={() => navigate("FMRScreen")}>
          FMR
        </Button>
      </CardSection>

    </Card>

カードのスタイル:

cardStyle: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#0000ff',
}

CardSection スタイル:

containerStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    borderColor: '#ddd',
    height: 150,
    width: 150,
    borderRadius: 20,
    marginTop: 10,
},

アイテムのスタイル:

textStyle: { 
    color: '#007aff',
    fontSize: 20,
    fontWeight: '600',
},
buttonStyle: {
    backgroundColor: 'rgba(255, 255, 255, 0)',
    borderWidth: 0,
    borderColor: '#007aff',
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
},

そして、これは私が得るものです：

flexWrap: 'wrap' を削除すると、この問題は解決することに注意してください。ただし、これを行うことはできません。

何か案は？