Css 对齐项目：'；柔性端'；不'；无法正常工作（无法覆盖整页）-反应为本机

所以在我的主页中，我有4个按钮，我用flex设计了它们。我已经将家长的flex设置为：1，这意味着它将覆盖整个页面（我已经用backgroundColor确保了这一点）。我的问题是，当我设置alignItems:“flex end”时，按钮只会向下移动一点，就好像flex只覆盖了页面的一半

这是我的代码标记：

<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>

卡片部分样式：

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”，但我不能这样做

---

有什么想法吗？

您需要这样做才能使其正常工作，其中

元素是flex项最外层的flex父元素

请注意添加的

alignContent:“flex end”

，这是flex项目包装时需要的

导航（“新闻屏幕”）}>
新的
导航（“保存屏幕”）}>
保存的
导航（“参数屏幕”）}>
设置
导航（“FMRScreen”）}>
FMR
集装箱运输方式：{
弹性：1，
flexDirection:'行'，
flexWrap:“wrap”，
为内容辩护：“周围的空间”，
对齐项目：“柔性端”，
alignContent:“柔性端”，
背景颜色：“#0000ff”，
}
截面样式：{
边界宽度：1，
填充：5，
背景颜色：“#fff”，
边框颜色：'#ddd'，
身高：150，
宽度：150，
边界半径：20，
玛金托普：10，
}

和flex项目的CSS。。。？还向我们显示标记好的，您需要将

卡上的
对齐项目
@LGSon设置为项目或父项？@Michael\u B是的，这是相同的问题。谢谢你提到它。@Michael_B试图以欺骗的方式结束，尽管我没有足够的重复次数。对于初始标记：）。。。当我改变自己时，仍然不允许单手关闭，而现在，我们知道这是同一个问题，你可以关闭它，我不明白。这不正是我的代码吗？@TheMonster不，你把
容器样式
添加到
卡片部分
，它应该在
卡片上
。。。刚刚做了一个更新，检查样式变量名以及在markupI中的应用位置。我将它们写在不同的.js文件中，所以它们都有相同的名称。为了更好地澄清，我对问题进行了编辑。我完全按照你在回答中所说的去做，但它不起作用。@TheMonster在更新后，请注意你使用了
alignItems:'center'，
…而不是
flex-end
@TheMonster并添加
alignContent:'flex-end'
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',
},

<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,    
}