React 本机样式表: { flex: 1}是做什么的？

在我看到的所有例子中，他们都是这样做的:

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 Natural 中的 flex: 1等同于 CSS 中的 display: flex。

下面的 CodePen 演示了使用 React 本机示例的 flex: 1在 CSS 中没有任何作用:

Http://codepen.io/johnnyo/pen/bokbpb

直到我们在 CSS 中使用 display: flex，这个过程才开始，直到 Flexbox 开始工作:

Http://codepen.io/johnnyo/pen/epzxgz

那么，这是否意味着 flex: 1在反应原生等价于 display: flex在 CSS？

45055 次浏览
小开
最佳答案

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: 1，flex: 3)时，才会使用 flex: Attribute，这意味着第二个元素应该比第一个元素大3倍。Flex 属性是唯一支持的(不支持增长/收缩)。

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

小开

对 Jarek Potiuk 的回答有一个评论: ‘ flex: 1’确实做了一些反应——类似于 Flex 增长行为。即使它是唯一一个有 flex: 轮廓的。

例如 flexDirectalignItems 和 justifyContent 等样式都定义了元素子元素的样式。类似于 CSS Display: flex，它也定义了子元素。

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

例如，如果一个容器组件具有 fleD: ‘ row’，alignItems: ‘ center’
还有三个孩子:

子元素1的宽度为50

Child 2具有 flex 1(或任何其他数字，但1是常见的做法)

子3的宽度为50

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

小开

和你一样，我也很难理解 Facebook Code 上没有正确记录的这个标签，但我最终发现它有两个作用:

  1. 容器认为具有 flex属性的任何子元素的高度都为0，以便确定它们占用了多少空间。
  2. 具有 flex: X的组件在其他组件被布置好之后，可以扩展到占用容器中剩余的任何空间。它们按照 X 值的比例分享这些额外的空间。

第一个问题是为什么 flex: 1看起来与 display: flex具有相同的效果:

<ExampleAppContainer>
<Text>
I get printed.
</Text>
<Text style=\{\{flex: 1}}>
But I don't :(
</Text>
</ExampleAppContainer>

只打印第一个文本组件，因为第二个文本组件的高度被认为为0。ExampleAppContainer为第一个文本组件分配了足够的空间，而第二个文本组件没有任何扩展空间。

现在考虑下面的代码:

<ExampleAppContainer style=\{\{flex:1}}>
<Text>
I get printed.
</Text>
<Text style=\{\{flex: 1}}>
And so do I!
</Text>
</ExampleAppContainer>

因为 ExampleAppContainer有 flex: 1，所以它会尽可能地扩大占用空间。假设它是应用程序的 React 部分的根组件，这通常是整个手机屏幕。接下来，它为第一个文本组件分配足够的空间，并允许第二个文本组件展开，占据屏幕的其余部分。

按照这种方式，您通常需要在组件层次结构的所有方面应用 flex: 1，以便允许最内层的具有 flex: N空间的组件适当地扩展。

小开

很多教程使用 flex: 1，就像您在示例中所做的那样。主要原因是因为有时候(取决于元素，比如缺省的 列表样式，如果我的记忆没有问题的话)如果你不定义尺寸，比如高度(比如说。height: '400px').伸缩:是令人敬畏的，因为它保持事物响应各种大小。

但是我应该注意到，对于 没有兄弟姐妹中的任何组件，flex 的值都是完全任意的。前女友。对于您的顶级组件，您可以说 flex: 43254315，它的作用与 flex: 1相同。它只是意味着“占据整个空间”(不管“整个”是什么)。

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

简而言之: 取决于您的样式，它可能像 flex: 1一样 听着与 display: flex相同，但这只是因为您在示例中使用它的方式。如果你给它一些兄弟姐妹，你会发现它的行为非常不同。

小开

这很简单，当你对任何元素说 flex: 1的时候，如果这个元素有 flex: 1且没有父元素，那么这个元素就会得到所有屏幕大小的高度。

例如，您希望有一个容器元素获得所有屏幕高度，并且这个元素有三个子元素，每个元素有1/3屏幕高度 对于这个示例，只需获取父元素 flex: 1和三个子元素 flex: 1/3 看下面的代码

<View style=\{\{flex: 1,backgroundColor: 'red'}}>


<View style=\{\{flex: 1/3, backgroundColor: 'green'}}></View>


<View style=\{\{flex: 1/3, backgroundColor: 'yellow'}}></View>


<View style=\{\{flex: 1/3, backgroundColor: 'pink'}}></View>


</View>
小开 
flex: 1

  1. 告诉组件填充所有可用空间(由同一父组件在其他组件之间共享)。

  2. 如果有具有 flex值的兄弟组件，则其父组件需要具有 flex: 1(或更高)。如果父元素没有固定的宽度和高度或伸缩，那么父元素的尺寸将为0，伸缩子元素将不可见。


提交答案