我在正确使用flexbox时遇到问题,想澄清一下嵌套父元素和子元素的工作方式。
我知道孩子继承了父母的弹性。但是,如果您需要为孩子的孩子(孩子)抚养孩子,这会被覆盖吗?flexbox的正确用法是什么?
我什么时候都适用display: flex于孩子 的 孩子(婴儿)的缘故,或将是覆盖孩子的父母柔性?
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>
一个范围 柔性格式化的内容被限制在一个父/子关系。
这意味着弹性容器始终是父容器,而弹性项目始终是子容器。Flex属性仅在此关系内起作用。
子代以外的flex容器的后代不是flex布局的一部分,并且不接受flex属性。
您始终需要向父级应用display: flex或display: inline-flex向父级应用,才能将flex属性应用于子级。
display: inline-flex
有迹象表明,仅适用于柔性容器(例如,某些弯曲特性justify-content,flex-wrap和flex- direction),并有只适用于弯曲的物品一定弯曲特性(例如align-self,flex-grow和flex)。
justify-content
flex-wrap
flex- direction
align-self
flex-grow
flex
但是,伸缩项目也可以是伸缩容器。在这种情况下,该元素可以接受所有的flex属性。由于每个属性执行不同的功能,因此不存在内部冲突,也不需要覆盖任何内容。