How can I space evenly in both directions?-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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>