Flexbox 对齐 - 每行两个，然后一个

Question

我将添加一张我如何尝试使链接框对齐的图片：

examplepic

所以每行有两个，大小相同，然后在左最后一行有一个。我一直在尝试使用 wrap、justifycontent 和 flex，但我没有做对。有小费吗？代码如下；

return (

    <View style={styles.linkContainer}>

            <TouchableOpacity
                containerStyle={styles.linkContainerStyle}
                onPress={() =>
                    WebBrowser.openBrowserAsync(
                        "https://skatt.skatteetaten.no/web/minskatteside/?innvalg=minearbeidsgivere#/minearbeidsgivere"
                    )
                }
            >
                <View style={styles.linkContainer}>
                    <Icon name="arrow-circle-right" size={15}></Icon>
                    <Text style={{ fontWeight: "bold",fontSize: 13}}> Videregående opplæring </Text>
                </View>
            </TouchableOpacity>



            <TouchableOpacity
                containerStyle={styles.linkContainerStyle}
                onPress={() =>
                    WebBrowser.openBrowserAsync(
                        "https://skatt.skatteetaten.no/web/minskatteside/?innvalg=minearbeidsgivere#/minearbeidsgivere"
                    )
                }
            >
                <View style={styles.linkContainer}>
                    <Icon name="arrow-circle-right" size={15}></Icon>
                    <Text style={{ fontWeight: "bold",fontSize: 13}}> Lærling </Text>
                </View>
            </TouchableOpacity>




        <View style={styles.testTwo}>
            <TouchableOpacity
                containerStyle={styles.linkContainerStyle}
                onPress={() =>
                    WebBrowser.openBrowserAsync(
                        "https://skatt.skatteetaten.no/web/minskatteside/?innvalg=minearbeidsgivere#/minearbeidsgivere"
                    )
                }
            >
                <View style={styles.linkContainer}>
                    <Icon name="arrow-circle-right" size={15}></Icon>
                    <Text style={{ fontWeight: "bold",fontSize: 13}}> Høyere og anna utdanning </Text>
                </View>
            </TouchableOpacity>
        </View>



            <TouchableOpacity
                containerStyle={styles.linkContainerStyle}
                onPress={() =>
                    WebBrowser.openBrowserAsync(
                        "https://skatt.skatteetaten.no/web/minskatteside/?innvalg=minearbeidsgivere#/minearbeidsgivere"
                    )
                }
            >
                <View style={styles.linkContainer}>
                    <Icon name="arrow-circle-right" size={15}></Icon>
                    <Text style={{ fontWeight: "bold",fontSize: 13}}> Grunnskoleopplæring </Text>
                </View>
            </TouchableOpacity>




            <TouchableOpacity
                containerStyle={styles.linkContainerStyle}
                onPress={() =>
                    WebBrowser.openBrowserAsync(
                        "https://skatt.skatteetaten.no/web/minskatteside/?innvalg=minearbeidsgivere#/minearbeidsgivere"
                    )
                }
            >
                <View style={styles.linkContainer}>
                    <Icon name="arrow-circle-right" size={15}></Icon>
                    <Text style={{ fontWeight: "bold",fontSize: 13}}> Sommerkurs </Text>
                </View>
            </TouchableOpacity>
        </View>



);

}

和 CCS：

const styles = StyleSheet.create({




linkContainer:{
    flexDirection: 'column',

},


linkContainerStyle:{
    borderWidth: 1,
    borderColor: "black",
    backgroundColor: "white",
},

});

我删除了我在 CCS 中的尝试，因为此时它基本上是一团糟。如果有人对如何使图标与文本在同一行对齐有任何提示，那就太好了！。

Answer 1

这是您想要的对齐的工作示例

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 300px;
}

.container .item {
  width: 48%;
}

<div class="container">
  <div class="item">
    item1
  </div>
  
  <div class="item">
    item2
  </div>
  
  <div class="item">
    item3
  </div>
  
  <div class="item">
    item4
  </div>
  
  <div class="item">
    item5
  </div>
</div>