嗨嗨～歡迎來到「30天前端設計之旅」的DAY 27！今天我們將深入學習一個強大的布局系統——Flexbox，它能讓你靈活地編排不同尺寸、不同排列的版面，解決傳統 CSS 布局中的很多限制。無論是水平並列的內容排版、跨行跨列的布局，還是全域導覽列與標頭的設計，Flexbox 都能幫你輕鬆實現。

D-27的學習目標：

1. 學習 Flexbox 的基本概念與應用場景。
   • Flexbox（Flexible Box）是 CSS 中專門為一維佈局設計的強大工具，它允許容器內的項目在同一行或多行上靈活排列，並自動調整大小以適應不同的螢幕寬度。
   • display: flex 將父元素設置為彈性容器。
   • justify-content 控制元素之間的水平間距。
   • align-items 控制元素的垂直對齊方式。

Flexbox 基本語法：

.container {
    display: flex; /* 使父容器成為彈性容器 */
    justify-content: space-between; /* 控制水平排列 */
    align-items: center; /* 控制垂直對齊 */
}

2. 實現水平並列版面設計。
   • Flexbox 讓我們能夠輕鬆地將多個元素並列排放，不論元素的寬度是固定的還是自適應的，Flexbox 都能保持其完美的排列方式。
   • 對應學習日：第十二天（區塊概念）、第十三天（顯示屬性）。
   • 說明：justify-content: space-around 將區塊水平等距排列，align-items: center 讓區塊在垂直方向保持居中。

<div class="horizontal-container">
    <div class="box">區塊 1</div>
    <div class="box">區塊 2</div>
    <div class="box">區塊 3</div>
</div>

.horizontal-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.box {
    width: 30%;
    padding: 20px;
    background-color: #d6c6b9;
    text-align: center;
    color: white;
    font-size: 1.2em;
}

3. 利用 Flexbox 創建跨行跨列的版面布局。
   • 使用 Flexbox，你可以讓內容跨越多行，創造更複雜的排版佈局，這在響應式設計中非常實用。
   • 對應學習日：第十四天（表格屬性）、第十五天（多欄位排版）。
   • 說明：flex-wrap: wrap 讓 Flexbox 自動換行，flex: 2 讓特定區塊占用更多空間，實現跨行、跨列的效果。

<div class="flex-grid">
    <div class="grid-item span-2">跨兩行的區塊</div>
    <div class="grid-item">區塊 2</div>
    <div class="grid-item">區塊 3</div>
    <div class="grid-item">區塊 4</div>
</div>

.flex-grid {
    display: flex;
    flex-wrap: wrap;
}

.grid-item {
    flex: 1;
    padding: 20px;
    background-color: #b8a29c;
    color: white;
    text-align: center;
    margin: 10px;
}
.span-2 {
    flex: 2; /* 讓這個區塊跨越兩列 */
}

4. 設計全域導覽列與標頭編排。
   • 全域導覽列設計：Flexbox 的彈性特性使它非常適合用於設計響應式的全域導覽列，確保不同螢幕尺寸下的導航條保持一致且易於使用。
   • 說明：justify-content: space-between 將導覽列的項目等距分布，讓頁面整體更具結構性。

<nav class="navbar">
    <ul class="nav-list">
        <li><a href="#">首頁</a></li>
        <li><a href="#">服務</a></li>
        <li><a href="#">產品</a></li>
        <li><a href="#">聯絡我們</a></li>
    </ul>
</nav>

.navbar {
    background-color: #6c757d;
    padding: 15px;
}

.nav-list {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
}

.nav-list li a {
    color: white;
    text-decoration: none;
    padding: 10px;
}

*標頭的編排設計：Flexbox 可以輕鬆地將標頭中的標題和其他元素（如按鈕、搜尋框）進行水平並列排放，讓頁面標頭既整潔又具有可操作性。
*說明：標頭中的內容透過 Flexbox 分別在兩端對齊，並且保持垂直居中，讓頁面整體協調一致。

<header class="header">
    <h1 class="title">我的網站</h1>
    <button class="cta-btn">立即訂閱</button>
</header>

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #b8a29c;
}

.title {
    font-size: 2em;
    color: white;
}

.cta-btn {
    padding: 10px 20px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}