在嵌套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属性。由于每个属性执行不同的功能，因此不存在内部冲突，不需要重写任何内容。