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

Question

我在使用flexbox时遇到了问题,并且想要了解嵌套父元素和子元素的工作方式.

我知道孩子继承了父母的弹性.但如果你需要为孩子(宝宝)抚摸一个孩子,这会被覆盖吗？flexbox的正确用法是什么？

我什么时候都适用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>

Answer 1

一个范围柔性格式化的内容被限制在一个父/子关系.

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

子项之外的Flex容器的后代不是flex布局的一部分,并且不接受flex属性.

您始终需要应用display: flex或display: inline-flex向父级应用Flex属性以应用于子级.

有迹象表明,仅适用于柔性容器(例如,某些弯曲特性justify-content,flex-wrap和flex-direction),并有只适用于弯曲的物品一定弯曲特性(例如align-self,flex-grow和flex).

但是,flex项也可以是flex容器.在这种情况下,元素可以接受所有flex属性.由于每个属性执行不同的功能,因此不会发生内部冲突,也不需要覆盖任何内容.