title: React Native Stylesheet: what does {flex:1} do?
body: <p>React Native uses flexbox for layout. In all of the examples I've seen, they do something like this:</p>
  
  <pre><code>var styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'row'
    }
  });
  </code></pre>
  
  <p>I'm curious about the <code>flex: 1</code> part. Based on Chris Coyier's definition here <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a>, <code>flex: 1</code> should be the same as <code>flex-grow: 1</code>, but to me it looks like <code>flex: 1</code> in React Native is equivalent to <code>display: flex</code> in CSS.</p>
  
  <p>Here's a CodePen that demonstrates that <code>flex: 1</code> the way React Native examples use it doesn't do anything in CSS:</p>
  
  <p><a href="http://codepen.io/johnnyo/pen/BoKbpb">http://codepen.io/johnnyo/pen/BoKbpb</a></p>
  
  <p>It's not until we use <code>display: flex</code> in CSS until flexbox starts to work:</p>
  
  <p><a href="http://codepen.io/johnnyo/pen/epZXgz">http://codepen.io/johnnyo/pen/epZXgz</a></p>
  
  <p>So does this mean that <code>flex: 1</code> in React Native is equivalent to <code>display: flex</code> in CSS?</p>