I am trying to build a layout for a drag and drop game, I would like the drag placeholders (of which there is an undetermined amount, shown in black) to be laid out in rows with space around and aligned vertically. I can achieve this easily with regular flexbox like this:
with this code:
<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>
However, when I try to do this in React Native flexbox I get this:
Using this code:
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,
},
});
I put a small margin round the boxes to see where they are.
If I reduce the number of boxes so they don't wrap then the alignItems property seems to work as desired like this:
But as soon as they wrap they are no longer aligned center along the cross axis, they go to flex-start and I can't seem to move them from there?
Thanks in advance.