Flexbox alignment - two on each row and then one

Question

I'll just add a pic of how I am trying to get the link boxes to align:

examplepic

So two on each line, same size, and then one on the last left line. I have been experimenting with wrap, justifycontent and flex but I am not getting it right. Any tips? Code follows here;

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>



);

}

and CCS:

const styles = StyleSheet.create({




linkContainer:{
    flexDirection: 'column',

},


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

});

I removed my attempts in CCS as its mostly a mess at this point. If anyone have any tips on how to get the icons to align on the same line as the text as well that would be great!.

Answer 1

Here is a working example of the alignment you want

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