Flexbox 'flex' property in React Native
<p>I'm working my way through the wonderful <a href="https://github.com/jondot/ReactNativeKatas" rel="nofollow noreferrer">ReactNativeKatas</a> to learn flexbox layouts in React Native. In the example below, the <code>flex</code> property on the two child views of the parent <code>View</code> (the one using the <code>styles.container</code>) is set to <code>0.1</code>. Setting both to <code>0.1</code> places the first <code>View</code> on the absolute left of the display and the second <code>View</code> in the middle. Why does setting <code>0.1</code> to the <code>flex</code> property of both <code>View</code>s align them this way?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const FlexSize= (props)=&gt;{
  return (
    &lt;View style={styles.container}&gt;
      &lt;View style={{flex: 0.1}}&gt;
        &lt;Box style={{flex: 0.7}}/&gt;
        &lt;Box style={{backgroundColor:'yellow'}}/&gt;
        &lt;Box/&gt;
        &lt;Box style={{flex: 0.3, backgroundColor:'yellow'}}/&gt;
      &lt;/View&gt;
      &lt;View style={{flex: 0.1}}&gt;
        &lt;Box style={{flex: 0.5}}/&gt;
        &lt;Box style={{backgroundColor:'yellow'}}/&gt;
        &lt;Box/&gt;
        &lt;Box style={{flex: 0.5, backgroundColor:'yellow'}}/&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  )
}


const styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection:'row',
    backgroundColor: colors[1],
  },
});</code></pre>
</div>
</div>
</p>

<p>Rendered in the simulator:</p>

<p><a href="https://i.stack.imgur.com/AvrmR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AvrmR.png" alt="Flex Sizing Example"></a></p>