Python Flexbox Part 2: Direction, Wrapping & Item Powers
Beyond simple rows, Flexbox can flip into columns (flex-direction: column), wrap items onto new lines (flex-wrap: wrap) to create responsive grids, and expand specific items to fill leftover empty space (flex-grow: 1).
"flex-direction is rotating your conveyor belt from horizontal to vertical. flex-wrap is allowing boxes to start a second row when the shelf is full. flex-grow is the sponge in the middle that expands to soak up all leftover empty room."
Deep Dive: How It Works
flex-direction: row (default horizontal) vs column (vertical stack). Essential for sidebar menus and mobile views.
flex-wrap: wrap: By default, flexbox squishes all items onto one row. flex-wrap: wrap allows items to wrap onto the next line gracefully.
flex-grow: 1: Tells a specific child (like a search input or main content pane) to expand and take up all available remaining space.
flex-shrink: 0: Prevents an icon or button from being squashed when space gets tight.
Syntax Blueprint
/* Expanding Search Bar */
.search-container {
display: flex;
gap: 8px;
}
.search-input {
flex-grow: 1; /* Takes all remaining width */
}flex-grow: 1 expands the input while buttons stay their natural size.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Forgetting that justify-content changes axis in column modeWhy it happens: When flex-direction: column is active, justify-content controls vertical spacing and align-items controls horizontal.
How to fix: Remember: justify-content ALWAYS follows the direction of the conveyor belt.
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.
Create a vertical flex column with gap
- Write a CSS rule for .stack-container with display: flex; flex-direction: column; and gap: 12px;
Finished reading and practicing?
Mark this lesson as completed to update your course progress.