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

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?

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

A remark to Jarek Potiuk's answer: 'flex: 1' does do something in react-native similar to flex-grow behavior. Even if it is the only one with flex: defined.

Styles such as flexDirection, alignItems, justifyContent all define styling of children of the element. Similar to CSS Display: flex, which also defines children.

In contrast, flex: x defines the element itself.

E.g. if a container component has flexDirection: 'row', alignItems: 'center'
And there are 3 children:

child 1 has width 50

child 2 has flex 1 (or any other number, but 1 is common practice)

child 3 has width 50

Then the middle component will 'stretch' so that the 3 children together fill the entire width of the parent component.

A lot of tutorials use flex: 1, much like as you did in your example. The main reason is because sometimes (depending on the element, such as ListStyle by default, if my memory serves) the component will not take up the entire screen/area if you do not define the dimensions, such as the height (eg. height: '400px'). Flex: is awesome because it keeps things responsive for various sizes.

But I should note that for any component with no siblings, the value for flex is totally arbitrary. Ex. for your top-level component, you could say flex: 43254315 and it does the same thing as flex: 1. It just means "take up the entire space" (whatever "entire" that may be).

On the other hand, if you have some sibling components, then the flex value matters a lot. For example, if one component is flex: 2 and another is flex: 3, then the first takes up 2/5 of the screen and the second takes up 3/5 of the screen.

In short: Depending on your styles, it might look like flex: 1 is the same as display: flex, but that's only because of the way you are using it in your example. You'll see it act very differently if you just give it some siblings.