1

我正在尝试为拖放游戏构建布局，我希望将拖动占位符（其中有一个未确定的数量，以黑色显示）排列成行，周围有空间并垂直对齐。我可以使用这样的常规 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 中执行此操作时，我得到了： 反应原生 alignItems 不对齐

使用此代码：

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 属性似乎可以按如下方式工作： alignItems 正常工作

但是一旦它们包裹起来，它们就不再沿着横轴对齐中心，它们会进入 flex-start 并且我似乎无法从那里移动它们？

提前致谢。

4

0 回答 0