嵌套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属性。

您始终需要向父级应用display: flex或display: inline-flex向父级应用，才能将flex属性应用于子级。

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

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