React Native Stylesheet: what does {flex:1} do?

Question

React Native uses flexbox for layout. In all of the examples I've seen, they do something like this:

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  }
});

I'm curious about the flex: 1 part. Based on Chris Coyier's definition here https://css-tricks.com/snippets/css/a-guide-to-flexbox/, flex: 1 should be the same as flex-grow: 1, but to me it looks like flex: 1 in React Native is equivalent to display: flex in CSS.

Here's a CodePen that demonstrates that flex: 1 the way React Native examples use it doesn't do anything in CSS:

http://codepen.io/johnnyo/pen/BoKbpb

It's not until we use display: flex in CSS until flexbox starts to work:

http://codepen.io/johnnyo/pen/epZXgz

So does this mean that flex: 1 in React Native is equivalent to display: flex in CSS?

Answer 1

There is quite a difference between css flexbox and the one implemented by Facebook. Lots of things in common but defaults are very different. Specifically:

Everything is display: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.

flex: attribute is only used when at the same level there are few components with different flex values (flex: 1, flex: 3) means that the second element should be 3 times bigger than the first one. flex attribute is the only one supported (no grow/shrink support).

More info: https://github.com/facebook/css-layout