How can I space evenly in both directions? - react-native

Question

I am developing a React Native app using Expo and I am using Styled Components.
At boot, it downloads a list of languages via an API and the flags of those languages are displayed on a selection screen.
I'm using flex-wrap so, right now, I have 6 languages, three rows, 2 flags in each row.
I am trying to figure out how to use flexbox so that the flags are spaced evenly in both directions.
I'm using flex-wrap and get even-spacing on the row.
How do I do the same column-wise, bearing in mind that the quantity of flags is dynamic?
I'd like the screen of languages to have even-spacing around the flags, both vertically and horizontally.

Answer 1

Ill suggest you doing that via Dimensions,
const screenWidth = Dimensions.get("window").width
Suppose you want to render 3 flags in a row and column can be N
so each Flag suppose takes up const eachWidth = (screenWidth-(gutterSpace+marginHorizontal))/3
Now so basically your marginHorizontal can be used as marginVertical so that all things are properly spaced.
const marginHorizontal = 20;
const gutterSpace = 10;
//Flag view
<View style={{width:eachWidth, margin:marginHorizontal}}/>
Hope it works, feel free for doubts

Answer 2

Could adding align-items: center work? Perhaps also setting height: 100vh if you're making a selection screen.
section {
display: flex;
flex-wrap: wrap;
height: 100vh;
align-items: center;
}
div {
box-sizing: border-box;
padding: 8px;
width: 50%;
border: 1px solid black;
text-align: center;
}
<section>
<div>flag</div>
<div>flag</div>
<div>flag</div>
<div>flag</div>
<div>flag</div>
<div>flag</div>
</section>