为什么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>
-
-
alignItems是控制单行项目的,如果需要控制多行试试用 alignContent:"center"