title: Flexbox 'flex' property in React Native
body: <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>