Flexbox 實戰：打造響應式網頁設計 - 謝宗佑的作品集網站

在現代網頁設計領域，「響應式網頁設計」(Responsive Web Design, RWD) 已成為一項不可或缺的技術。透過 RWD，網站能夠在各種裝置上展現最佳的瀏覽體驗。本文將深入探討如何利用 CSS Flexbox，一個強大的版面配置工具，來實現響應式網頁設計。

什麼是 Flexbox？

Flexbox，或稱為「彈性盒模型」，是一種 CSS3 的版面配置模式。它能夠簡化許多傳統上複雜的網頁排版問題，如水平、垂直置中，以及動態的空間分配。

Flexbox 的基本概念

Flexbox 主要由兩大元素構成：容器（flex container）和項目（flex items）。容器用來包裹項目，並控制其排列方式。

Flex 容器屬性

display: flex | inline-flex：啟用 flex 布局。
flex-direction: row | column：設定主軸方向。
justify-content: flex-start | center | space-between：沿主軸的對齊方式。
align-items: stretch | center：沿交叉軸的對齊方式。

Flex 項目屬性

flex-grow: <number>：設定項目的放大比例。
flex-shrink: <number>：設定項目的縮小比例。
flex-basis: <length> | auto：設定項目的基礎大小。
align-self: auto | flex-start | center：允許單個項目有不同的對齊方式。

實戰範例：建立一個響應式導航欄

讓我們通過一個實際的例子，一步步建立一個響應式的導航欄。

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Navigation Bar</title>
    <style>
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #333;
            color: white;
            padding: 10px;
        }

        .navbar-logo {
            flex-basis: 100px;
        }

        .navbar-items {
            display: flex;
            gap: 10px;
        }

        @media (max-width: 600px) {
            .navbar-items {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="navbar">
        <div class="navbar-logo">Logo</div>
        <div class="navbar-items">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
        </div>
    </div>
</body>
</html>

在這個例子中，我們使用了 Flexbox 來建立一個導航欄，當瀏覽器寬度小於 600px 時，導航項目會被隱藏，以適應小螢幕裝置。

使用 Flexbox 處理複雜排版

Flexbox 的真正威力在於它能夠輕鬆處理傳統上複雜的排版問題。例如，如果我們想要在一個區塊中平均分配三個元素的空間，僅需幾行 Flexbox 代碼即可輕鬆實現。

.container {
    display: flex;
    justify-content: space-around;
}

.item {
    flex: 1;
}

這種排版特別適合於建立響應式設計的網格系統，它可以讓網頁元素在不同裝置上保持一致的外觀和感覺。

結語

Flexbox 提供了一個靈活且強大的方式來處理網頁布局。透過簡單直觀的語法，開發者可以快速實現各種複雜的設計概念。隨著越來越多的裝置和螢幕尺寸的出現，Flexbox 在響應式網頁設計中的角色將變得更加重要。