Question

我正在尝试为拖放游戏构建一个布局，我希望拖动占位符（其中有一个未确定的数量，以黑色显示）布局成行，周围有空格并垂直对齐。我可以使用常规的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属性似乎按照需要工作：

但是一旦它们包裹起来，它们就不再沿着十字轴对齐中心，它们会进入弹性开始，我似乎无法从那里移动它们？

提前致谢。

React Native flexWrap使alignItems停止工作

0 个答案: