Question

我在使用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 formatting context的范围仅限于父/子关系。

这意味着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属性。由于每个属性执行不同的功能，因此不会发生内部冲突，也不需要覆盖任何内容。

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

1 个答案: