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

Answer 2

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.