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

Posted 2023-03-05

【中文标题】嵌套弹性容器时正确使用弹性属性

【英文标题】：Proper use of flex properties when nesting flex containers

【发布时间】：2016-10-16 21:01:42

【问题描述】：

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

我知道孩子继承了父母的 flex 属性，但是对于任何进一步的后代（例如“孙子”），这会恢复吗？ flexbox 的正确用法是什么？

换句话说，对于 child 的 孩子，我是否也必须为孩子申请display: flex？这会覆盖第一个孩子的父母的弹性属性吗？

.parent-container 
  display: flex;
  flex: 1 0 100%;
  background-color:yellow;

.child-container 
  flex: 1 1 50%
  background-color: blue;

.baby-of-child-container 
  flex: 1 1 50%;
  background-color: green;

<div class='parent-container'>
  <div class='child-container'>
    <div class='baby-of-child-container'>child</div>
    <div class='baby-of-child-container'>child</div>
  </div>
  <div class='child-container'>
    <div class='baby-of-child-container'>child</div>
    <div class='baby-of-child-container'>child</div>
  </div>
</div>

【参考方案1】：

flex formatting context 的范围仅限于父/子关系。

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

flex 容器超出子级的后代不属于 flex 布局，并且不会接受 flex 属性。

您始终需要将display: flex 或display: inline-flex 应用于父级，以便将弹性属性应用于子级。

有些弹性属性只适用于弹性容器（例如，justify-content、flex-wrap 和 flex-direction），有些弹性属性只适用于弹性项目（例如，align-self、@ 987654328@ 和 flex)。

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