鉴于 flex 属性不是分层的，在嵌套 flex 布局中的所有祖先节点上设置 "flex:1" 或 "flex-grow:1" 的说明？

Question

我已经读过好几次了，为了让flex-grow按预期工作，你通常需要在元素的父元素、它的父元素等上设置flex-grow:1(或flex:1)等等。

这让我在学习flexbox时给人的印象是它具有某种等级性质。

但我刚刚了解到，所有flow-*属性都不是分层的，仅直接应用于容器及其直接子项。

我认为除了我之外，许多人都会从对 flex 属性(尤其是flex-grow与元素/组件层次结构交互)以及您在祖先节点上设置属性以使布局正常工作时的实际操作中受益。

这在 React Native 中可能是一个更大的问题，其中 flex 是主要的布局方法，布局可能涉及比 Web 上常见的更深的嵌套。

一个相关的因素，在我的情况下增加了混乱，是 以这种方式手动传播flex-grow如何与flex-direction一起工作，尤其是在 React Native 中，通常会在row和column之间交替。

Answer 1

...用于在嵌套中的所有祖先节点上设置"flex：1"或"flex-grow：1" 弹性布局...

说"在所有祖先节点上"是不准确的，它应该在所有后代节点上，就父节点/子节点而言，这意味着flex-grow设置在子节点上，而不是父节点上，但由于元素既可以是父元素也可以是子元素，因此通常称为嵌套 flex元素，如果父元素也是子元素，则可以具有flex-grow。

flex 格式上下文在这里有一个很好的解释答案：

• 嵌套弹性容器时正确使用弹性属性

---

。在 祖先节点，以使布局正常工作。

同样，说"在祖先节点上设置属性时"是不准确的，您在后代节点上设置属性

设置"弹性：1">

---

或"弹性增长：1"的说明...在嵌套弹性中 布局

首先，设置flex: 1等于flex: 1 1 0，flex-grow: 1等于flex: 1 1 auto，这是基于flex默认为flex: 0 1 auto，这里解释得很好：

弹性：1

• 和弹性增长：1 之间的区别

---

现在，flex-grow默认为0，这意味着它不会大于其内容，类似于inline-block元素的工作方式，并且将像这样呈现：

body { margin: 0; }
.flex-container {
display: flex;
height: 100vh; 
}
.flex-parent {
display: flex;
}
.row-direction {
flex-direction: row;
}
.column-direction {
flex-direction: column;
}
.flex-child {
margin: 2px;
border: 1px dashed gray;
}

<div class="flex-container column-direction">
<div class="flex-child flex-parent row-direction">
<div class="flex-child">
First row, first item
</div>
<div class="flex-child">
First row, second item
</div>
<div class="flex-child">
First row, third item
</div>

</div>
<div class="flex-child flex-parent row-direction">
<div class="flex-child">
Second row, first item
</div>
<div class="flex-child">
Second row, second item
</div>

</div>
<div class="flex-child flex-parent row-direction">
<div class="flex-child">
Third row, first item
</div>

</div>
</div>

所以flex-grow: 1所做的是使元素增长并填充其父元素中的可用空间，就像这样，正如你所看到的，这里像 React 经常做的那样在行和列之间交替，它完美地工作：

body { margin: 0; }
.flex-container {
display: flex;
height: 100vh; 
}
.flex-parent {
display: flex;
}
.row-direction {
flex-direction: row;
}
.column-direction {
flex-direction: column;
}
.flex-child {
flex-grow: 1;
margin: 2px;
border: 1px dashed gray;
}

<div class="flex-container column-direction">
<div class="flex-child flex-parent row-direction">
<div class="flex-child">
First row, first item
</div>
<div class="flex-child">
First row, second item
</div>
<div class="flex-child">
First row, third item
</div>

</div>
<div class="flex-child flex-parent row-direction">
<div class="flex-child">
Second row, first item
</div>
<div class="flex-child">
Second row, second item
</div>

</div>
<div class="flex-child flex-parent row-direction">
<div class="flex-child">
Third row, first item
</div>

</div>
</div>