alignItems：'flex-end'无法正常工作（它不会覆盖整个页面） - 反应原生

Question

所以在我的主页上我有4个按钮，我已经用flex布局了。我设置了父的flex：1，这意味着它覆盖了整个页面（我用backgroundColor确定了它）。我的问题是，当我设置alignItems：'flex-end'时，按钮只会向下移动一点，好像flex只覆盖了页面的一半。

这是我的代码Mark-up：

<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'，这个问题就会消失，但我不能这样做！

有什么想法吗？

Answer 1

你需要做这样的事情才能使它正常工作，<Card>元素是flex项目最外面的flex父元素。

注意添加的alignContent: 'flex-end'，当弹性项目换行时需要

<Card style={styles.containerStyle}>

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

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

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

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

</Card>

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

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