Python Flexbox Part 1: Container Powers (justify, align, gap)
Before Flexbox, centering a div or building a navbar was the most frustrating task in web design. Setting display: flex on a parent container turns all immediate children into flexible items that you can distribute, space, and center with 3 lines of code.
"Think of display: flex as an intelligent conveyor belt. You turn on the belt (display: flex), tell it where to push boxes (justify-content), how to vertically align them (align-items), and how much space to leave between them (gap)."
Deep Dive: How It Works
display: flex: Enables flexbox mode on the parent container. Children automatically line up side-by-side horizontally.
justify-content (Main Axis / Horizontal): space-between (navbar logo left, links right), center (centered), flex-start, flex-end, space-around.
align-items (Cross Axis / Vertical): center (perfect vertical alignment!), flex-start, flex-end, stretch.
gap: Sets uniform spacing between flex children without having to write annoying margin-right rules on every item!
Syntax Blueprint
/* The Sacred Navbar Formula */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}Pushes brand logo to the left, nav links to the right, and centers vertically.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Putting justify-content on the child elementWhy it happens: Thinking child elements control their own alignment.
How to fix: justify-content and align-items belong strictly on the parent container with display: flex.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Center items with Flexbox
- Write a CSS rule for .flex-center setting display: flex; justify-content: center; and align-items: center;
Finished reading and practicing?
Mark this lesson as completed to update your course progress.