Flexbox 入門：快速掌握基礎布局技巧

在現代網頁設計中，Flexbox（彈性盒模型）已成為重要的布局工具之一。透過 Flexbox，開發者可以更靈活、更快速地處理網頁元素的排列和對齊問題，從而提高開發效率並創建更佳的用戶體驗。本文將帶您快速掌握 Flexbox 的基礎布局技巧，並透過實例程式碼示範其運用。

Flexbox 簡介

Flexbox，全稱 Flexible Box Layout Module，是一種CSS3的佈局模式，專門用於在容器內部分配子元素的空間和排列方式。不同於傳統的布局模型（如塊模型和行內模型），Flexbox 更注重於元素的彈性排列，讓元素能夠應對不同螢幕尺寸和顯示需求。

Flexbox 的主要概念

• Flex 容器（Flex Container）: 將一個元素定義為 Flex 容器，其內部的子元素會成為 Flex 項目（Flex Items）。
• Flex 項目（Flex Items）: 容器內的子元素，可以透過 Flexbox 屬性進行控制。
• 主軸（Main Axis）與交叉軸（Cross Axis）: Flexbox 有兩個主要軸線，決定了項目的排列方向。

如何使用 Flexbox

要開始使用 Flexbox，首先需要將一個容器元素設定為 Flex 容器。這可以通過將 display 屬性設為 flex 或 inline-flex 來完成。

範例 1：創建 Flex 容器

HTML:

<div class="flex-container">
    <div>項目 1</div>
    <div>項目 2</div>
    <div>項目 3</div>
</div>

CSS:

.flex-container {
    display: flex;
}

這段代碼將 .flex-container 元素定義為 Flex 容器，其內部的 div 元素自動成為 Flex 項目。

控制 Flex 項目的排列

Flexbox 提供了多種屬性來控制項目的排列和對齊方式。

主軸排列：justify-content

justify-content 屬性用於控制項目在主軸上的排列方式，例如居中、空間平均分布等。

範例 2：水平居中排列 Flex 項目

CSS:

.flex-container {
    display: flex;
    justify-content: center;
}

交叉軸對齊：align-items

align-items 屬性用於控制項目在交叉軸上的對齊方式。

範例 3：垂直居中對齊 Flex 項目

CSS:

.flex-container {
    display: flex;
    align-items: center;
}

Flexbox 的進階應用

Flexbox 還提供了更多高級功能，如 flex-grow、flex-shrink 和 flex-basis，這些屬性允許更細緻地控制 Flex 項目的大小和比例。

Flex 項目的彈性增長：flex-grow

flex-grow 屬性決定了 Flex 項目在必要時如何增長以填充多餘的空間。

範例 4：設定 Flex 項目的彈性增長

CSS:

.flex-item {
    flex-grow: 1;
}

總結

Flexbox 是一個強大的布局工具，它能夠提供快速、靈活的方式來創建響應式和整潔的網頁布局。通過本文的介紹和範例，您應該能夠開始使用 Flexbox 來改善您的網頁設計。隨著練習和實驗，您將能夠更深入地掌握 Flexbox，進而創造出更加精緻和用戶友好的網頁體驗。