Выравнивание Flexbox - по два в каждом ряду, а затем по одному

Question

Я просто добавлю пи c того, как я пытаюсь выровнять поля ссылок:

examplepi c

Итак, два в каждой строке того же размера, а затем по одной в последней левой строке. Я экспериментировал с 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>