Flexbox alignment - 每行两个，然后一个

Question

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

示例图

所以每行两个，大小相同，然后在最后一行左一个。 我一直在尝试使用 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

这是您想要的 alignment 的工作示例

 .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>