Introduction to Flexbox

📦 What is Flexbox?

Flexbox stands for _________________ Box Layout

Why Flexbox was Revolutionary:

Before Flexbox, developers used:

Tables for layout (Problem: _________________)
Floats (Problem: _________________)
Positioning (Problem: _________________)
Inline-block (Problem: _________________)

What Flexbox Provides:

_________________________________________
_________________________________________
_________________________________________
_________________________________________

🎨 Core Concepts

The Two Key Players:

Component	CSS Property	What It Does
Flex Container (Parent)	_________________	_________________________________________
Flex Items (Children)	Automatic	_________________________________________

💡 Remember: Only _________________ children become flex items!

Basic Flexbox Code:

            .container {
                _________: flex;
            }
            
            /* Children automatically become flex items! */
        

🛠️ Flexbox Properties

Container Properties (Applied to Parent):

Property	Common Values	What It Controls
flex-direction	_________________	Main axis direction
justify-content	_________________	Alignment on main axis
align-items	_________________	Alignment on cross axis
flex-wrap	_________________	Allow items to wrap
gap	_________________	Space between items

Item Properties (Applied to Children):

Property	Default Value	What It Controls
flex-grow	_____	_________________________________________
flex-shrink	_____	_________________________________________
flex-basis	_____	_________________________________________
align-self	auto	_________________________________________

📐 Understanding Axes

Main Axis vs Cross Axis

When flex-direction is row (default):

Main axis runs: _________________
Cross axis runs: _________________

When flex-direction is column:

Main axis runs: _________________
Cross axis runs: _________________

🎯 Key Rule: justify-content works on the _________________ axis, align-items works on the _________________ axis

🎨 Common Flexbox Patterns

1. Perfect Centering

            .center-everything {
                display: _________;
                justify-content: _________;
                align-items: _________;
            }
        

2. Navigation Bar (Logo - Nav - Button)

            .navbar {
                display: _________;
                justify-content: _________;
                align-items: _________;
            }
        

3. Card Layout with Wrapping

            .card-container {
                display: _________;
                flex-wrap: _________;
                gap: _________;
            }
        

💻 Practice Exercise: Build a Header

Challenge Requirements:

Logo on the left
Navigation links in the center
Login button on the right
Everything vertically centered

Your Solution:

                .header {
                    display: _________;
                    justify-content: _________;
                    align-items: _________;
                    padding: _________;
                }
                
                .nav {
                    display: _________;
                    gap: _________;
                }
            

Sketch Your Layout:

Draw your header layout here

⚠️ Common Flexbox Gotchas

Margin Collapse:
Properties that don't work on flex items: _________, _________, _________
Default flex-shrink value: _____ (What does this mean? _________________________________________)
Only direct children:

🛠️ DevTools Tips for Flexbox

Essential DevTools features for debugging Flexbox:

Look for the _________________ badge in Elements panel
Use the _________________ tab to see flex properties
Check _________________ styles to see actual values
Use _________________ editing to test changes

Pro Tip: If something isn't working, _________________ it first!

🌍 Real-World Applications

Where You'll Use Flexbox:

UI Components	Responsive Design
_________________	_________________
_________________	_________________
_________________	_________________
_________________	_________________

🎯 Key Takeaways

Complete these statements:

To create a flex container, I use:
Direct children automatically become:
For horizontal alignment on the main axis, I use:
For vertical alignment on the cross axis, I use:
Elements can be both a flex container AND:

📚 Resources

Interactive Learning:

Flexbox Froggy: _________________________________________
Flexbox Defense: _________________________________________

Documentation:

MDN Flexbox Guide: _________________________________________
CSS-Tricks Complete Guide: _________________________________________

📝 Additional Notes

Use this space for any additional notes during the lecture:

Introduction to Flexbox - Guided Notes

📦 What is Flexbox?

Why Flexbox was Revolutionary:

What Flexbox Provides:

🎨 Core Concepts

The Two Key Players:

Basic Flexbox Code:

🛠️ Flexbox Properties

Container Properties (Applied to Parent):

Item Properties (Applied to Children):

📐 Understanding Axes

Main Axis vs Cross Axis

🎨 Common Flexbox Patterns

1. Perfect Centering

2. Navigation Bar (Logo - Nav - Button)

3. Card Layout with Wrapping

💻 Practice Exercise: Build a Header

Challenge Requirements:

Your Solution:

Sketch Your Layout:

⚠️ Common Flexbox Gotchas

🛠️ DevTools Tips for Flexbox

🌍 Real-World Applications

Where You'll Use Flexbox:

🎯 Key Takeaways

Complete these statements:

📚 HOMEWORK REMINDER

📚 Resources

Interactive Learning:

Documentation:

📝 Additional Notes