CSS Flexbox Introduction

  Flexbox is a **modern layout system**.
  
  It was created because:
  - floats were confusing
  - centering was hard
  - responsive layouts were painful
  
  ## What flexbox does
  It controls:
  - alignment
  - spacing
  - direction
  
  ## Basic setup
  ```css
  .container {
    display: flex;
  }
  ```
  
  ## UI Visualization
  - Items align in one row
  - No float needed
  
  ## Real-world example
  - Navigation bars
  - Header layouts
  - Cards row
  
  ## Important idea
  Flexbox works on **parent-child relationship**