flexbox - React Native 样式表 : what does {flex:1} do?

Question

React Native 使用 Flexbox 进行布局。在我见过的所有示例中，他们都会执行以下操作:

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

我对 flex: 1 部分很好奇。基于 Chris Coyier 的定义 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ， flex: 1 应该与 flex-grow: 1 相同，但对我来说，它看起来与 React Native 中的 flex: 1 是等效的到 CSS 中的 display: flex。

这是一个 CodePen，它演示了 React Native 示例使用 flex: 1 的方式在 CSS 中不执行任何操作:

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

直到我们在 CSS 中使用 display: flex 后，flexbox 才开始工作:

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

那么这是否意味着 React Native 中的 flex: 1 相当于 CSS 中的 display: flex ？

Answer 1

css flexbox 和 Facebook 实现的有很大区别。有很多共同点，但默认值却截然不同。具体来说:

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:属性仅在同一级别上有少数组件具有不同的flex值(flex:1，flex:3)时使用，意味着第二个元素应该比第一个元素大3倍。 flex 属性是唯一受支持的属性(不支持增长/收缩)。

更多信息:https://github.com/facebook/css-layout