Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Proper use of flex properties when nesting flex containers
A flex container is always the parent and a flex item is always the child. 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 flex layout and will not accept flex properties. There are certain flex properties that apply only to flex containers:
- justify-content
- flex-wrap
- flex-direction
- align-items
- align-content
There are certain flex properties that apply only to flex items:
- align-self
- flex-grow
- flex-shrink
- flex-basis
- flex (shorthand)
Always apply display: flex or display: inline-flex to a parent in order to apply flex properties to the child.
Nesting Flex Containers
When nesting flex containers, each level needs its own display: flex declaration. Let's see an example with three levels of nesting:
<div class='parentBox'>
<div class='childBox'>
<div class='babyChildBox'>Parent's Child</div>
<div class='babyChildBox'>Parent's Child</div>
</div>
<div class='childBox'>
<div class='babyChildBox'>Parent's Child</div>
<div class='babyChildBox'>Parent's Child</div>
</div>
</div>
CSS Styling
The parent container uses display: flex and the flex shorthand property:
.parentBox {
display: flex;
flex: 1 0 100%;
background-color: yellow;
border: 3px solid skyblue;
}
For the child containers, we also need display: flex to make them flex containers for their children:
.childBox {
display: flex;
flex: 1 1 50%;
background-color: green;
color: white;
border: 1px solid blue;
}
The nested grandchildren use flex properties since their parent (.childBox) is a flex container:
.babyChildBox {
flex: 1 1 50%;
background-color: orange;
color: black;
border: 1px solid red;
}
Complete Example
<!DOCTYPE html>
<html>
<head>
<style>
.parentBox {
display: flex;
flex: 1 0 100%;
background-color: yellow;
border: 3px solid skyblue;
padding: 10px;
}
.childBox {
display: flex;
flex: 1 1 50%;
background-color: green;
color: white;
border: 1px solid blue;
margin: 5px;
padding: 10px;
}
.babyChildBox {
flex: 1 1 50%;
background-color: orange;
color: black;
border: 1px solid red;
margin: 2px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Nested Flex Containers</h1>
<div class='parentBox'>
<div class='childBox'>
<div class='babyChildBox'>Grandchild 1</div>
<div class='babyChildBox'>Grandchild 2</div>
</div>
<div class='childBox'>
<div class='babyChildBox'>Grandchild 3</div>
<div class='babyChildBox'>Grandchild 4</div>
</div>
</div>
</body>
</html>
Key Points
- Each nested level requires its own
display: flexdeclaration - Flex properties only work on direct children of flex containers
- A flex item can also be a flex container by adding
display: flex - The flex shorthand combines flex-grow, flex-shrink, and flex-basis
Conclusion
When nesting flex containers, remember that each level needs display: flex to enable flexbox properties on its children. This creates a hierarchical flex layout system where each container manages its own direct children.
2K+ Views
