`height:'100%', width:'100%'`与`Flex:1`之间的区别答案

【问题标题】：Difference between `height:'100%', width: '100%'` vs. `Flex:1``height:'100%', width:'100%'`与`Flex:1`之间的区别
【发布时间】：2019-08-11 07:02:32
【问题描述】：

想知道两者之间的区别是什么，这是我的假设 flex:1 在两个方向上完全扩展。但是在 react-native 应用程序中，如果我有一个样式为 height:'100%', width: '100%' 的 <ImageBackground>，则子按钮的大小与其内部文本所需的一样大。但是如果图像背景样式是flex:1，child 按钮会展开到全屏宽度。

这是按钮样式：

btn: {
    paddingTop: "10rem",
    paddingBottom: "7rem",
    paddingHorizontal: "15rem",
    marginTop: "15rem",
    marginHorizontal: "20rem",
    backgroundColor: "#333",
    "@media ios": {
      borderRadius: 50
    },
    "@media android": {
      borderRadius: 50,
      elevation: 4
    },
    borderColor: "#fff",
    borderWidth: 0
  },
  btn_text: {
    color: "#fff",
    fontSize: "20rem",
    fontFamily: "BungeeInline-Regular",
    textAlign: "center"
  }

有关容器在两种情况下对其子项的影响的详细信息？

【问题讨论】：

我是这样理解的：在 flex:1 中-容器可以指定其子项的一致布局，因此在您的情况下；子按钮扩展到全屏宽度。在高度，宽度：100 ? % - 我知道这些维度应该是无单位的。你为什么要给单位？ [facebook.github.io/react-native/docs/height-and-width.html] 以及关于容器效果 - 我不确定。我也想知道。
此上下文中的宽度/高度为单位（即'100%'），在sn-ps 中，#rem 是基于归一化函数的“单位”

标签： reactjs react-native

【解决方案1】：

Flex one 有几个特点：

它需要在其父对象之一中设置明确的维度。
它需要其直接父级拥有display: flex。
它将适合父级的尺寸，但会受到父级的填充影响。
它会受到兄弟元素的影响。

假设您有两个flex: 1 兄弟元素，那么它们将在父元素内填充相等的比例（1/2 和 1/2）。如果是flex: 1 & flex: 2，那么它们将占用 1/3 和 2/3 的空间。如果您有一个具有明确高度和宽度的元素作为同级元素，则 flex: 1 将填充到该同级元素。

【讨论】：

在这种情况下，父母有flex:1，而不是孩子。孩子（按钮）没有明确定义的高度/宽度。因此，如果父级 (<ImageBackground>) 设置为flex:1，它是否会对其子级、兄弟按钮强制执行一些规则，如果是，它是什么？类似@Lelo 的建议？
如果ImageBackground 有flex: 1，那么它的父级需要有display: flex。如果 display: flex 没有为其父级声明，flex: 1 不应该做任何事情。