Flexbox Mastery

Lesson 8 • Intermediate Track

💡 Think of Flexbox Like This

Imagine a bookshelf: You can arrange books left-to-right (row) or stack them top-to-bottom (column). You can push them to the left, center, or spread them evenly. Flexbox gives you this same control over web elements!

Property	Real-World Analogy	What It Does
`display: flex`	Turning a container into a shelf	Enables flexbox on container
`justify-content`	How books spread across the shelf	Horizontal alignment
`align-items`	How tall/short books align	Vertical alignment
`gap`	Space between books	Spacing between items
`flex-direction`	Horizontal vs vertical shelf	Row or column layout

What is Flexbox?

Flexbox is a powerful one-dimensional layout system that makes it easy to align and distribute items in a container, even when their size is unknown or dynamic.

Flexbox Basics

See how display: flex transforms a container

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Flexbox Basics</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 20px;
      color: #e5e7eb;
    }
    
    h2 { color: #3b82f6; }
    
    .no-flex {
      background: #1e293b;
      padding: 20px;
      margin: 20px 0;
      border-radius: 8px;
    }
    
    .with-flex {
      display: flex;
      gap: 15px;
      background: #1e293b;
      padding: 20px;
      margin: 20px 0;
      border-ra
...

justify-content (Main Axis)

Controls how items are distributed along the main axis (horizontal by default).

justify-content Options

See all the ways to distribute items horizontally

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>justify-content</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 20px;
      color: #e5e7eb;
    }
    
    .demo {
      display: flex;
      background: #1e293b;
      padding: 15px;
      margin: 10px 0;
      border-radius: 8px;
      min-height: 60px;
    }
    
    .item {
      background: #3b82f6;
      padding: 10px 20px;
      border-radius: 6px;
      color: white;
    }
    
    .st
...

align-items (Cross Axis)

Controls how items are aligned along the cross axis (vertical by default).

align-items Options

See all the ways to align items vertically

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>align-items</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 20px;
      color: #e5e7eb;
    }
    
    .demo {
      display: flex;
      gap: 10px;
      background: #1e293b;
      padding: 15px;
      margin: 10px 0;
      border-radius: 8px;
      height: 120px;
    }
    
    .item {
      background: #3b82f6;
      padding: 10px 20px;
      border-radius: 6px;
      color: white;
    }
  
...

Perfect Centering

The holy grail of CSS - centering both horizontally AND vertically!

Perfect Centering with Flexbox

Center anything in seconds

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Perfect Centering</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      margin: 0;
      padding: 0;
    }
    
    /* THE MAGIC FORMULA */
    .centered-container {
      display: flex;
      justify-content: center;
      align-items: center;
      
      /* Full viewport height */
      min-height: 100vh;
    }
    
    .centered-content {
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
     
...

flex-direction

Change the main axis direction - row (horizontal) or column (vertical).

flex-direction

Switch between row and column layouts

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>flex-direction</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 20px;
      color: #e5e7eb;
    }
    
    .demo {
      display: flex;
      gap: 10px;
      background: #1e293b;
      padding: 20px;
      margin: 10px 0;
      border-radius: 8px;
    }
    
    .item {
      background: #3b82f6;
      padding: 15px 25px;
      border-radius: 6px;
      color: white;
      font-weight: bold;
 
...

Practice: Build a Navigation Bar

Build a navigation bar with Flexbox:

Logo on the left
Navigation links on the right
Vertically centered items

Flexbox Navigation

Build a real navigation bar

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Flexbox Navigation</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      color: #e5e7eb;
    }
    
    /* FLEXBOX NAVBAR */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      background: #1e293b;
      padding: 15px 30px;
      border-bottom: 1px solid #334155;
  
...

🎉 Lesson Complete

You now have a solid grasp of Flexbox — the most-used layout tool in modern CSS. Key takeaways:

✅ display: flex turns a container into a flex container
✅ justify-content controls horizontal distribution
✅ align-items controls vertical alignment
✅ gap adds consistent spacing between items
✅ flex-direction: column switches to vertical layout
✅ Perfect centering = justify-content: center; align-items: center;

Flexbox Mastery

💡 Think of Flexbox Like This

What is Flexbox?

Flexbox Basics

justify-content (Main Axis)

justify-content Options

align-items (Cross Axis)

align-items Options

Perfect Centering

Perfect Centering with Flexbox

flex-direction

flex-direction

Practice: Build a Navigation Bar

Flexbox Navigation

🎉 Lesson Complete

Cookie & Privacy Settings