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

Question

我将添加一张图片，说明我如何尝试对齐链接框：

示例

每行两个，大小相同，最后一行一个。我一直在尝试包裹、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>