title: Is there any better way to make same gap spaces between items in flex display?
body: <ol>
  <li>use <code>flexbox</code> (because it is react-native)</li>
  <li>parent container's width is a percentage</li>
  <li>item count can be 4/5/6/7..</li>
  <li>same gap spaces between items</li>
  <li>like picture below</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/aIxxG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aIxxG.png" alt="enter image description here"></a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>const styles = {
  container: {
    width: screenWidth * 0.9,
    flexWrap: 'wrap',
    flexDirection: 'row'
  },
  item: {
    backgroundColor: 'red',
    height: 120,
    width: (width * 0.9 - 20) / 3,
    marginBottom: 10
  }
  }
  
  &lt;View style={styles.container}&gt;
    {items.map((item, idx) =&gt;
      &lt;View style={[styles.item, { marginHorizontal: idx % 3 === 1 ? 10 : 0}]} /&gt;
    )}
  &lt;/View&gt;
  </code></pre>
  
  <p>Is there another better way to realize this layout?</p>