css - 考虑到 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

...for setting “flex:1” or “flex-grow:1” on all ancestor nodes in nested flex layouts...

说“在所有祖先节点上”是不准确的，应该是在所有后代节点上，这在父/子，意思是，flex-grow 是在 child 上设置的，而不是 parent，但是因为一个元素可以同时是 parent 和一个 child，一般称为 nested flex 元素，一个 parent 可以有 flex-grow 如果它也是一个 child 。

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

• > Proper use of flex properties when nesting flex containers

---

...what you're actually doing when setting the property on the ancestor nodes to get your layout to work.

同样，说“在祖先节点上设置属性”是不准确的，您在后代节点上设置属性强>

---

Explanation for setting “flex:1” or “flex-grow:1” ... in nested flex layouts

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

• > The difference between flex:1 and flex-grow:1

---

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

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>