React Native Stylesheet：{flex： 1}做什么？

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/，＜code＞flex:1等同于CSS中的＜code＞display:flex。

这里有一个CodePen，它证明了flex：1 React Native示例使用它的方式在CSS中没有任何作用：

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

直到我们在CSS中使用< code>display: flex时，flexbox才开始工作:

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

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

Answer 1

许多教程都使用 flex： 1，就像您在示例中所做的那样。主要原因是因为有时（取决于元素，例如ListStyle，如果我的内存可用），如果您不定义尺寸，例如高度（例如。高度：“400 像素”）。Flex：非常棒，因为它可以保持各种尺寸的响应速度。

但是我应该注意，对于任何没有兄弟的组件，flex的值完全是任意的。《出埃及记》对于您的顶级组件，您可以说< code>flex: 43254315，它做的事情与< code>flex: 1相同。它只是意味着“占据整个空间”(无论“整个”可能是什么)。

另一方面，如果您有一些兄弟组件，那么flex值非常重要。例如，如果一个组件是flex:2而另一个组件则是flex:3，则第一个组件占据屏幕的2/5，第二个组件占据了屏幕的3/5。

简而言之:根据您的风格，< code>flex: 1看起来可能与< code>display: flex相同，但这只是因为您在示例中使用它的方式不同。如果你给它几个兄弟姐妹，你会发现它的行为非常不同。

Answer 2

对Jarek Potiuk的答案的评论是：“flex：1”确实在react-native中做了一些类似于flex-grow行为的事情。即使它是唯一一个具有flex：定义的。

诸如flexDirection，alignItems，justifyContent之类的样式都定义了元素子元素的样式。类似于CSS Display：flex，它也定义了子级。

相反，flex: x定义了元素本身。

例如，如果容器组件具有flexDirection: 'row '，alignItems: 'center'
并且有3个子组件:

子1有宽度50

子 2 具有弹性 1（或任何其他数字，但 1 是常见做法）

儿童 3 的宽度为 50

然后中间组件将“拉伸”，以便3个子组件一起填充父组件的整个宽度。

Answer 3

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