在嵌套flex容器时正确使用flex属性 [英] Proper use of flex properties when nesting flex containers

问题描述

我在使用flexbox时遇到问题，想要了解如何嵌套父元素和子元素的工作原理。

我知道子继承父类的flex。但是，如果你需要弯曲一个孩子的孩子（宝贝），这是否会覆盖？

什么时候需要将 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> 
  

解决方案

flex格式上下文 受到限制到父/子关系。

这意味着flex容器始终是父容器，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属性。由于每个属性执行不同的功能，因此没有内部冲突，也不需要重写。

I am having problems using flexbox properly and wanted to get some clarification on how nesting parent and child elements works.

I know that the child inherits the parent's flex. But does that get overwritten if you need to flex a child for its children (baby)? What is the proper usage of flexbox?

When do I have to apply display: flex to the child for its child's (baby's) sake, or will that overwrite the child's parent 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>

解决方案

The scope of a flex formatting context is limited to a parent/child relationship.

This means that a flex container is always the parent and a flex item is always the child. Flex properties work only within this relationship.

Descendants of a flex container beyond the children are not part of flex layout and will not accept flex properties. Essentially, elements that are descendants of flex items do not inherit flex properties.

You will always need to apply display: flex or display: inline-flex to a parent in order to apply flex properties to the child.

There are certain flex properties that apply only to flex containers (e.g., justify-content, flex-wrap and flex-direction), and there are certain flex properties that apply only to flex items (e.g., align-self, flex-grow and flex).

However, flex items can also be flex containers. In such cases the element can accept all flex properties. Being that each property performs a different function, there is no internal conflict and nothing needs to be overridden.

这篇关于在嵌套flex容器时正确使用flex属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！