我正在尝试为拖放游戏构建一个布局，我希望拖动占位符（其中有一个未确定的数量，以黑色显示）布局成行，周围有空格并垂直对齐 . 我可以使用常规的flexbox轻松实现这一点：
使用此代码：
<html>
<head>
<style>
.container {
display:flex;
flex:1;
align-items:center;
justify-content:space-around;
flex-direction:row;
flex-wrap: wrap;
background-color: #ccc;
width:500px;
height:300px;
}
.drag {
width:100px;
height: 100px;
margin:10px;
background-color: #000;
}
</style>
</head>
<body>
<div class="container">
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
</div>
</body>
但是，当我尝试在React Native flexbox中执行此操作时，我得到：
使用此代码：
return (<View style={styles.container}>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
</View>);
const styles = StyleSheet.create({
container: {
justifyContent: 'space-around',
alignItems: 'center',
flexDirection:'row',
backgroundColor: '#ccc',
width:'100%',
height:'100%',
flexWrap:'wrap',
},
box: {
width:140,
height:140,
backgroundColor:'#000',
margin:2,
},
});
我在盒子周围放了一小块边缘，看看它们在哪里 .
如果我减少了盒子的数量，所以它们不会换行，那么alignItems属性似乎按照这样的方式工作：
但是一旦它们包裹起来，它们就不再沿着十字轴对齐中心，它们会进入弹性开始，我似乎无法从那里移动它们？
提前致谢 .