在嵌套FLEX容器时适当使用FLEX属性

Question

在嵌套FLEX容器时适当使用FLEX属性我在正确使用Flexbox时遇到了问题，我想弄清楚嵌套的父元素和子元素是如何工作的。我知道孩子继承了父母的弹性。但是，如果你需要为它的孩子弯曲一个孩子(宝贝)，这会被改写吗？柔性箱的正确用法是什么？我什么时候要申请？display: flex给孩子它的孩子的(婴儿的)清酒，还是会覆盖孩子的父母的挠曲？.parent-container {   display: flex;   flex: 1 0 100%;}.child-container {   flex: 1 1 50%}.baby-of-child-container {   flex: 1 1 50%;}<div class='parent-container'>   <div class='child-container'>     <div class='baby-of-child-container'></div>     <div class='baby-of-child-container'></div>   </div>   <div class='child-container'>     <div class='baby-of-child-container'></div>     <div class='baby-of-child-container'></div>   </div></div>

Answer 1

范围FLEX格式上下文仅限于父子关系。

这意味着FLEX容器始终是父容器，而FLEX项始终是子容器。Flex属性仅在此关系中工作。

子容器之外的FLEX容器的后代不是FLEX布局的一部分，也不会接受FLEX属性。

你总是需要申请display: flex或display: inline-flex以便将FLEX属性应用于子对象。

有些FLEX属性只适用于FLEX容器(例如，justify-content, flex-wrap和flex-direction)，并且有一些只适用于FLEX项的FLEX属性(例如，align-self, flex-grow和flex).

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