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

为什么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>
    0

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

    row

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

    0

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

    0