Computer >> Computer tutorials >  >> Programming >> Javascript

Proper use of flex properties when nesting flex containers


A flex container is always the parent and a flex item is always the child because the scope of a flex formatting context is limited to a parent/child relationship.

Descendants of a flex container beyond the children are not part of the flex layout and will not accept flex properties.

You need to always use −

display: flex

or

display: inline-flex

Some flex properties apply only to flex containers −

justify-content
flex-wrap
flex-direction

Some flex properties that apply only to flex items −

align-self
flex-grow
flex