Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Flexbox Zombies
Chapter 1: I See You Found My Crossbow (flex-direction)
Chapter 1
Wake Up
Aiming East (flex-direction: row)
Aiming West (flex-direction: row-reverse)
Aiming South (flex-direction: column)
Aiming North (flex-direction: column-reverse)
Creator of the Crossbow
Brain Time
Chapter 2: The Justify Laser (justify-content)
Chapter 2
Rise and Shine
First Kill
The Justify Laser (justify-content)
East Distance Shot (justify-content: flex-end)
West Distance Shot (justify-content: flex-end)
South Distance Shot (justify-content: flex-end)
Clever Tactics (justify-content: center)
The Space Between (justify-content: space-between)
Devious Attack (justify-content: space-around)
You Got This
Challenge 2.1
Challenge 2.2
Challenge 2.3
Challenge 2.4
Challenge 2.5
Challenge 2.6
Challenge 2.7
Challenge 2.8
Challenge 2.9
What Are They Up To?
Brain Time
Chapter 3: The Alignment Lasers (align-items)
Chapter 3
Laser Evasion
Start from the Top (align-items: flex-start)
Start from the Left (align-items: flex-start)
End at the Bottom (align-items: flex-end)
End at the Right (align-items: flex-end)
Tricky Stretchy Trick (align-items: stretch)
A Centering Obession (align-items: center)
It's All About the Lasers
Challenge 3.1
Challenge 3.2
Challenge 3.3
Challenge 3.4
Challenge 3.5
Challenge 3.6
Challenge 3.7
Challenge 3.8
Challenge 3.9
Challenge 3.10
Challenge 3.11
The Undead Grudge
Brain Time
Chapter 4: One of These Things is Not Like the Others (align-self)
Chapter 4
Weakness Amplified
Did We Guess Right?
Classic One-Off (align-self: flex-start)
Meat Shield (align-self: stretch)
How Very Self-Centered (align-self: center)
Multiple Overrides (align-self: flex-end)
Lucky Guess (align-self: flex-end)
Let Me Try
Challenge 4.1
Challenge 4.2
Challenge 4.3
Challenge 4.4
Challenge 4.5
Challenge 4.6
Challenge 4.7
Challenge 4.8
We Need a Plan
Brain Time
Chapter 5: Where the Wild Things Grow (flex-grow)
Chapter 5
A Long Trip
First Encounter
A Bit Shaken Up
Totes Adorbs
What to Do With All This Extra Space (flex-grow: 1)
That's Just the Way It Grows (flex-grow: 1)
All About the Ratio (flex-grow:1 & flex-grow: 2)
Even Zombies Feel Greed (flex-grow: 1 & flex-grow: 3)
Sometimes You Just Don't Wanna Grow (flex-grow: 0)
Easy Town
Challenge 5.1
Challenge 5.2
Challenge 5.3
Challenge 5.4
Challenge 5.5
Challenge 5.6
Challenge 5.7
Challenge 5.8
Challenge 5.9
Challenge 5.10
Outer Defenses Crushed
Brain Time
Chapter 6: That Shrinking Feeling (flex-shrink)
Chapter 6
Into the Labyrinth
O Snap They Can Shrink (flex-shrink: 1)
The Path of Least Resistance (flex-shrink default)
Tricky Shrinking Tactics (flex-shrink: 1 & flex-shrink: 2)
Generous Little Goo (flex-shrink: 3)
No Shrink For You (flex-shrink: 0)
Highly Adaptive (both flex-shrink & flex-grow)
I'm Not Your Shrink
Challenge 6.1
Challenge 6.2
Challenge 6.3
Challenge 6.4
Challenge 6.5
Challenge 6.6
Challenge 6.7
Challenge 6.8
Challenge 6.9
Challenge 6.10
The Point of No Return
Brain Time
Chapter 7: In a Perfect World (flex-basis)
Chapter 7
The Ideal Size
Gotta Start Somewhere (flex-basis: 300px)
Basis Trumps Width (width vs flex-basis)
What About Min Width? (flex-basis + min-width)
What About Max Width? (flex-basis + max-width)
Not Just For Width (vertical flex-basis)
So Many Ways to Basis (flex-basis: 50%)
No Guarantees (flex-basis as ideal size)
On Auto Pilot (flex-basis: auto)
When Things Shrink (flex-basis & flex-shrink)
When Things Grow (flex-basis & flex-grow)
Just a Starting Point
Challenge 7.1
Challenge 7.2
Challenge 7.3
Challenge 7.4
Challenge 7.5
Challenge 7.6
Challenge 7.7
Challenge 7.8
Challenge 7.9
Challenge 7.10
Getting Closer
Brain Time
Chapter 8: Out of Order (order)
Chapter 8
Ready for Anything
Order Matters (order: 1)
Watch Your Six (flex-direction:row-reverse & order)
Vertical Order (flex-direction:column & order)
Back of the Line! (siblings with no order)
Front of the Line! (negative order & siblings with no order)
Numbers Game (ascending order)
Order First
Challenge 8.1
Challenge 8.2
Challenge 8.3
Challenge 8.4
Challenge 8.5
Challenge 8.6
Challenge 8.7
Run Away!!!
Brain Time
Chapter 9: Get Your Own Line (flex-wrap)
Chapter 9
Devil's Gate
Plenty of Room (flex-wrap: wrap)
Only When We Have To (flex-wrap: wrap)
Vertical Wrap (vertical flex-wrap)
Reverse All the Things (flex-wrap: wrap-reverse)
Good to Grow (flex-wrap & flex-grow)
Shrinking as a Last Resort (flex-wrap & flex-shrink)
Totally Justified (flex-wrap & justify-content)
Power of the Wrap
Challenge 9.1
Challenge 9.2
Challenge 9.3
Challenge 9.4
Challenge 9.5
Challenge 9.6
Challenge 9.7
Challenge 9.8
Victory on the Horizon
Brain Time
Chapter 10: Read Between the Lines (align-content)
Chapter 10
Desperate Measures
Stretchy Lines (align-content: stretch)
Up Top (align-content: flex-start)
Down Low (align-content: flex-end)
Same as Reading ((vertical) align-content: flex-end)
Bunch in the Middle (align-content: center)
Space Around the Lines (align-content: space-around)
Read Between the Lines (align-content: space-between)
How the Lines Align
Challenge 10.1
Challenge 10.2
Challenge 10.3
Challenge 10.4
Challenge 10.5
Challenge 10.6
This is It
Brain Time
Chapter 11: Shortcut to the Kill (flex & flex-flow)
Chapter 11
A Faster Way
The Flex (flex: grow, shrink, basis)
Grow & Shrink (flex: grow, shrink)
Grow & Basis (flex: grow, basis)
Just Grow Yo (flex: grow)
I'm All About that Basis (flex: basis)
Keep it Simple (flex: none)
One Last Optimization (flex-flow)
Shorthands For the Win
Challenge 11.1
Challenge 11.2
Challenge 11.3
Challenge 11.4
Challenge 11.5
Don't Die On Me Now
Brain Time
Chapter 12: To the Death
Chapter 12
Face Off
Challenge 12.1
Challenge 12.2
Challenge 12.3
Challenge 12.4
Challenge 12.5
Challenge 12.6
Challenge 12.7
Challenge 12.8
Challenge 12.9
Journey's End
The Future is Here
Getting Closer
Lesson contents locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock