Html 嵌套flex容器时正确使用flex属性

我在正确使用flexbox时遇到了一些问题，我想了解嵌套父元素和子元素的工作原理

我知道孩子继承了父母的灵活性。但是，如果您需要为孩子（婴儿）调整一个孩子，这会被覆盖吗？flexbox的正确用法是什么

为了孩子（宝宝）的缘故，我什么时候必须对孩子应用

display:flex

，还是会覆盖孩子的父flex

。父容器{
显示器：flex；
弹性：10100%；
背景颜色：黄色；
}
.儿童容器{
弹性：150%
背景颜色：蓝色；
}
.儿童容器的婴儿{
弹性：150%；
背景颜色：绿色；
}

小孩
小孩
小孩
小孩

的范围仅限于父/子关系

这意味着flex容器始终是父容器，flex项始终是子容器。Flex属性仅在此关系中起作用

子级之外的flex容器的子代不是flex布局的一部分，并且不接受flex属性

您将始终需要将

display:flex

或

display:inline flex

应用于父级，以便将flex属性应用于子级

某些flex属性仅适用于flex容器（例如，

justify content

、

flex wrap

和

flex direction

），而某些flex属性仅适用于flex项目（例如，

align self

、

flex grow

和

flex

）

---

但是，flex项也可以是flex容器。在这种情况下，元素可以接受所有flex属性。由于每个属性执行不同的功能，因此不存在内部冲突，也不需要重写任何内容。

有时建议我们将

flex:1

或

flex grow:

不仅应用于父级，而且应用于所有父级。我会留意这些建议的答案，并在这里链接一些。这让我很困惑，所以我想其他人也一样。在React Native的情况下，基本上整个布局都是由flex组成的，这是我试图关注的。所以在RN中，大多数组件实际上都是容器和子组件。我是RN的新手，从来没有在web上使用过flex，所以不知道在web上使用flex作为大多数布局是否很常见，因为它在RN中是嵌套式的，因此我询问任何具有flex专业知识的人，尤其是那些具有React原生flex专业知识的人。我认为用“孙子”来描述这个词是更好的方式为了更好的解释。