css

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .header {
      background-color: #2c3e50;
      color: white;
      padding: 2rem;
      text-align: center;
    }
    
    .main-container {
      flex: 1;
      display: flex;
      min-height: 0;
    }
    
    .sidebar {
      background-color: #ecf0f1;
      padding: 2rem;
      width: 250px;
      flex-shrink: 0;
    }
    
    .content {
      flex: 1;
      padding: 2rem;
      background-color: white;
    }
    
    .footer {
      background-color: #34495e;
      color: white;
      padding: 1.5rem;
      text-align: center;
    }
    
    .sidebar-menu {
      list-style: none;
    }
    
    .sidebar-menu li {
      margin-bottom: 1rem;
    }
    
    .sidebar-menu a {
      color: #2c3e50;
      text-decoration: none;
      display: block;
      padding: 0.75rem;
      border-radius: 4px;
      transition: background-color 0.3s;
    }
    
    .sidebar-menu a:hover {
      background-color: #bdc3c7;
    }
    
    @media (max-width: 768px) {
      .main-container {
        flex-direction: column;
      }
      
      .sidebar {
        width: 100%;
      }
    }

html

<header class="header">
    <h1>🏠 我的網站標題</h1>
    <p>歡迎來到我的個人網站</p>
  </header>
  
  <div class="main-container">
    <aside class="sidebar">
      <h3>📋 選單</h3>
      <ul class="sidebar-menu">
        <li><a href="#">🏠 首頁</a></li>
        <li><a href="#">👤 關於我</a></li>
        <li><a href="#">💼 作品集</a></li>
        <li><a href="#">📝 部落格</a></li>
        <li><a href="#">📞 聯絡我</a></li>
      </ul>
    </aside>
    
    <main class="content">
      <h2>📝 主要內容區域</h2>
      <p>這裡是網站的主要內容。使用 Flexbox 可以很容易地建立這種三欄式佈局，而且還能保持響應式設計。</p>
      
      <h3>🎯 Flexbox 的優勢</h3>
      <ul>
        <li>✅ 簡單易懂的語法</li>
        <li>✅ 自動處理空間分配</li>
        <li>✅ 天生支援響應式設計</li>
        <li>✅ 垂直置中變得容易</li>
        <li>✅ 項目順序可以調整</li>
      </ul>
      
      <p>無論內容多長多短，側邊欄和主要內容區都會自動調整高度，頁尾也會保持在底部。</p>
    </main>
  </div>
  
  <footer class="footer">
    <p>© 2024 我的網站. 使用 Flexbox 製作 ❤️</p>
  </footer>