CoffeePeddlerIntern CoffeePeddlerIntern - 3 months ago 7
CSS Question

Are flex properties overwritten when making a flex item a flex container?

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



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>





What is the proper usage of flexbox? 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)? Is this the proper usage or do I need to

.child-container {
display: flex;
flex: 1 1 50%;
}


Where I have to apply
display: flex
to the child for its child's (baby's) sake, or does that overwrite the child's parent flex?

Answer

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.