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

我在正确使用flexbox时遇到了问题，并希望得到关于嵌套父元素和子元素如何工作的一些说明。

我知道孩子继承父母的柔性。 但是如果你需要为孩子（孩子）弯曲一个孩子，它会被覆盖吗？ 什么是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属性仅在此关系中起作用。

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

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

有一些flex属性只适用于flex容器（例如justify-content ， flex-wrap和flex-direction ），并且某些flex属性只适用于flex项目（例如， align-self ， flex-grow和flex ）。

但是，flex项目也可以是flex容器。 在这种情况下，元素可以接受所有的柔性属性。 由于每个财产执行不同的功能，没有内部冲突，没有什么需要被覆盖。