为什么flex换行时,alignItems:"center" 会失效



  • 刚好一行的时候可以居中,一旦超出自动换行时就变成默认的flex-start了

    <View style={{flex:1,flexDirection:"column",backgroundColor:"#66ccff"}}>
    <View style={{flex: 1, backgroundColor: 'powderblue'}} ></View>
    <View style={{flex: 2, backgroundColor: 'skyblue'}} ></View>
    <View style={{flex: 3,flexDirection:"row",
    flexWrap:"wrap",
    backgroundColor: 'steelblue',
    justifyContent:"space-between",
    alignItems:"center"}}>

                    <View style={{width:80, height:80, backgroundColor:"green",}}><Text>1</Text></View>
                    <View style={{width:80, height:80, backgroundColor:"green",}}><Text>2</Text></View>
                    <View style={{width:80, height:80, backgroundColor:"green",}}><Text>3</Text></View>
                    <View style={{width:80, height:80, backgroundColor:"green",}}><Text>4</Text></View>
                    <View style={{width:80, height:80, backgroundColor:"green",}}><Text>5</Text></View>
                    <View style={{width:80, height:80, backgroundColor:"green",}}><Text>6</Text></View>
                    <View style={{width:80, height:80, backgroundColor:"green",}}><Text>7</Text></View>
                </View>
            </View>


  • @1227449145为什么flex换行时,alignItems:"center" 会失效 中说:

    row

    有Bug呗,正常。 你这种需求还是很好实现的,中间多加一层容器包裹就好了



  • alignItems是控制单行项目的,如果需要控制多行试试用 alignContent:"center"