说明如何设置“flex：1”或“flex-grow：1”在所有的祖先节点嵌套灵活布局给定flex属性不分层？ [英] Explanation for setting "flex:1" or "flex-grow:1" on all ancestor nodes in nested flex layouts given that flex properties are not hierarchical?
问题描述
我已经多次阅读过，为了使 flex-grow 能像预期的那样工作，你经常需要设置 flex-grow：1 < code $（或code> flex：1 ）在元素的父元素，父元素等等上一直向上。
这给了我一个学习flexbox的印象，它具有某种层次性。
但是我刚才知道所有的 flow - * 属性不是分层的，只能直接应用于一个容器及其直接的子元素。
将受益于对flex属性（特别是 flex-grow ）与元素/组件层次结构交互的清晰解释以及在祖先节点上设置属性时的实际操作让你的布局工作。
这可能是React Native中的一个问题，其中flex是布局的主要方法，布局可能涉及比在网上常见。
在我的例子中，一个相关的因素增加了混淆，那就是通过祖先手动传播 flex-grow 特别是在React Native中，code> flex-direction 通常在行和列之间交替。 code $。
...用于设置flex：1或 flex-grow：1在嵌套
的所有祖先节点上flex layouts ...
要说在所有的祖先节点上是不准确的，它应该在所有后代节点上，对于父节点，意味着 flex-grow 设置在子，而不是 parent ，但是因为一个元素既可以是父和子，通用调用的嵌套的flex 元素，父可以具有 flex-grow 如果它也是一个子。
$ b flex格式上下文在这里有一个很好解释的答案：
...在
祖先节点上设置属性时，
同样，在祖先节点上设置属性时说 是不准确的，你可以在后代节点上设置属性
在嵌套的flex
布局中设置flex：1或flex-grow：1的说明
$ b 首先，设置 flex：1 等于 flex：1 1 0 和 flex-grow：1 等于 flex：1 1 auto ，这是基于 flex 默认为 flex：0 1 auto ，在这里解释：
现在， flex-grow 默认为 0 ，这意味着它不会比它的内容大，类似于 inline-block 元素的工作，并将像这样呈现：
body {margin：0; } .flex-container {display：flex;身高：100vh; flex-child {margin：2px;} .flex-parent {display：flex;}。row-direction {flex-direction：row;}。 border：1px dashed gray;}
< div class = flex-container column-direction> < div class =flex-child flex-parent row-direction> < div class =flex-child>第一行，第一项< / div> < div class =flex-child>第一行，第二项< / div> < div class =flex-child>第一行，第三项< / div> < / DIV> < div class =flex-child flex-parent row-direction> < div class =flex-child>第二行，第一项< / div> < div class =flex-child>第二行第二项< / div> < / DIV> < div class =flex-child flex-parent row-direction> < div class =flex-child>第三行，第一项< / div> < / div>< / div>
code> flex-grow：1 的作用是使元素增长并填充其父元素中的可用空间，就像这样，正如你所看到的，这里在行和列之间交替React经常做，它完美的作品：
$ b
< div class = flex-container column-direction> < div class =flex-child flex-parent row-direction> < div class =flex-child>第一行，第一项< / div> < div class =flex-child>第一行，第二项< / div> < div class =flex-child>第一行，第三项< / div> < / DIV> < div class =flex-child flex-parent row-direction> < div class =flex-child>第二行，第一项< / div> < div class =flex-child>第二行第二项< / div> < / DIV> < div class =flex-child flex-parent row-direction> < div class =flex-child>第三行，第一项< / div> < / div>< / div>
I've read several times that to get flex-grow to work as expected you often need to set flex-grow:1 (or flex:1) on the element's parent, its parent, etc, all the way up.
This gave me the impression while learning flexbox that it had a hierarchical nature of some kind.
But I've just learned that all of the flow-* properties are not hierarchical and apply only directly to a container and its immediate children.
I think many people besides me will benefit from a clear explanation of how flex properties, especially flex-grow interact with the element/component hierarchy and what you're actually doing when setting the property on the ancestor nodes to get your layout to work.
This may be more of a problem in React Native where flex is the primary method of layout and layout may well involve rather deeper nesting than is common on the web.
A related factor, which added to the confusion in my case, was how manually propagating flex-grow through the ancestors this way worked with flex-direction, which especially in React Native, will often alternate between row and column.
...for setting "flex:1" or "flex-grow:1" on all ancestor nodes in nested flex layouts...
To say "on all ancestor nodes" is inaccurate, it should be on all descendant nodes, which, in terms of parent/child, mean, flex-grow is set on the child, not parent, but since an element can be both a parent and a child, general callled nested flex elements, a parent can have flex-grow if it also is a child.
The flex formatting context has a well explained answer here:
...what you're actually doing when setting the property on the ancestor nodes to get your layout to work.
Again, to say "when setting the property on the ancestor nodes" is inaccurate, you set the property on the descendant nodes
Explanation for setting "flex:1" or "flex-grow:1" ... in nested flex layouts
First, setting flex: 1 is equal to flex: 1 1 0, and flex-grow: 1 is equal to flex: 1 1 auto, and this is based on that flex defaults to flex: 0 1 auto, well explained here:
Now, flex-grow defaults to 0, which means it won't be bigger than its content, similar to how an inline-block element work, and will as such render like this:
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>
So what flex-grow: 1 does, is to make the element grow and fill the available space within its parent, like this, and as you can see, here alternate between row and column as React often does, it works perfect:
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>
这篇关于说明如何设置“flex：1”或“flex-grow：1”在所有的祖先节点嵌套灵活布局给定flex属性不分层？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
