如何阻止 flexbox 将容器粘在屏幕底部答案

【问题标题】：How to stop flexbox sticking containers to bottom of screen如何阻止 flexbox 将容器粘在屏幕底部
【发布时间】：2022-11-29 23:06:23
【问题描述】：

我想要一个看起来像这样的组件，在 GitHub 中打开按钮靠近其余内容，如下所示：

但是，在我的应用程序中，按钮卡在屏幕底部，如下所示：

我认为 flexbox 会自动为孩子们提供 vertical-align: "Top" 属性......

另外，我尝试将 vertical-align: Top 添加到子组件，但它什么也没做。

 <><View style={styles.container} testID="repositoryItem" >
              <View>
                <Image source={{ uri: repositories?.repository?.ownerAvatarUrl }} style={styles.image} />
  
              </View>
              <View>
                <Text style={styles.name}> {repositories?.repository?.fullName}</Text>
                <Text> {repositories?.repository?.description}</Text>
                <Text style={styles.language}> {repositories?.repository?.language} </Text>
              </View>
            </View><View style={styles.container2}>
                <View>
              <Text style={styles.name}>{kFormatter(repositories?.repository?.stargazersCount)}</Text>
              <Text>Stars</Text>
                </View>
                <View>
                <Text style={styles.name}>{kFormatter(repositories?.repository?.forksCount)}</Text>
                <Text>Forks</Text>
                </View>
                <View>
                <Text style={styles.name}>{repositories?.repository?.reviewCount}</Text>
                <Text>Reviews</Text>
                </View>
                <View>
                <Text style={styles.name}>{repositories?.repository?.ratingAverage}</Text>
                <Text>Rating</Text>
                </View>
                </View>
                <View style={styles.container3}>
                <Pressable     title="Open in GitHub"
          placeholder="Open in GitHub"
          onPress={onClick}
          testID="submitButton"
          style={{margin: 10, padding: 10, backgroundColor: 'lightblue'}}>
      
        <Text style={{ textAlign: 'center', color: 'white'}}>
          Open in GitHub
        </Text>
        </Pressable>
                </View>
             </>

风格：

const styles = StyleSheet.create({
    container: {
      display: 'flex',
  alignItems: 'center',
  flexDirection: 'row',
  justifyItems: 'start',
  minHeight: 0
    },
    container2: {
      display: 'flex',
  flexDirection: 'row',
  flexGrow: 1,
  minWidth: '100%',
  justifyContent: 'space-evenly'
    },
    container3: {
display: 'flex',
flexDirection: 'column',
minWidth: '100%',
minHeight: 0,
justifyContent: 'space-evenly'
    },
    separator: {
      height: 10,
      backgroundColor: 'lightgrey'
    },
    image: {
      width: 50,
      height: 50,
      margin: 20
    },
    language: {
      borderStyle: 'solid',
      borderWidth: 2,
      borderColor: 'white',
      padding: 3,
      backgroundColor: 'blue',
      color: 'white',
      borderRadius: 5,
      alignSelf: 'flex-start'
    },
    name: {
      fontWeight: 'bold'
    }
  });

有没有人强制子组件不粘在页面底部？

【问题讨论】：

标签： css react-native flexbox

【解决方案1】：

你的 container 风格有一个 flexGrow: 1 所以它会占用所有可用的空间。去掉它应该就OK了。

此外，如果您可以提供指向 jsfiddle 或等效项的链接以便直接测试，那会更容易 ;)

【讨论】：