对齐项目：'flex-end' 无法正常工作（它没有覆盖整个页面）- 本机反应

Question

因此，在我的主页中，我有 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>

卡片样式：

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> 元素是弹性项目的最外层弹性父元素。

注意添加的alignContent: 'flex-end'，当flex items wrap

时需要

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

对齐项目：'flex-end' 无法正常工作（它没有覆盖整个页面）- 本机反应

alignItems: 'flex-end' doesn't work properly (it doesb't cover the whole page) - react native

css

flexbox

react-native

react-native-flexbox