初探 CSS Flexbox：佈局設計基礎

CSS Flexbox 是一種強大的前端佈局模式，用來讓頁面內容能夠簡單地在容器中排列和分佈。強大的彈性適應特性使得 Flexbox 能夠輕鬆地實現多種佈局設計，是因應現今多樣性的裝置尺寸需求而生的工具。Flexbox 的設計理念就是要解決以往用 CSS 排版時常見的痛點，例如：垂直居中、不同元素的等高設置以及快速彈性生活適配等。

要開始使用 Flexbox，你需要將容器的 display 屬性設為 flex。

.container {
  display: flex;
}

這麼做後，所有容器直接子項目都會成為 flex 項目，能享受 Flexbox 的位置和縮放優勢。記得各項目在 flex 容器內會自動排列成行，而 flex-direction 可以改變排列方向。

Flexbox 的 flex-direction 屬性允許開發者改變項目在容器內排列的主軸方向，可能的值有：row、row-reverse、column 和 column-reverse。

.container {
  flex-direction: column;
}

此範例中，所有項目會垂直排列。主軸與交叉軸的理解對於掌握 Flexbox 是至關重要的，它直接影響到項目的排列和排版方式。

在了解了 Flexbox 的主軸之後，我們可以精確控制項目在主軸上的排列，這主要透過 justify-content 屬性來實現。常用值包括：flex-start、flex-end、center、space-between、space-around。

.container {
  justify-content: space-between;
}

這會在項目之間分配均等的空間，使它們間距一致地填滿整個容器。

align-items 是用來控制項目在交叉軸上的排列方式的屬性。當項目在主軸方向排列時，交叉軸即為與主軸垂直的方向。

.container {
  align-items: center;
}

以上 CSS 會將所有項目在交叉軸方向中心對齊，使得容器內的元素在不同裝置中能夠美觀地排列。

Flexbox 項目可以透過 flex-grow 屬性自我調整大小以填滿容器。

.item {
  flex-grow: 1;
}

設定為 1 的項目會相較於不設定的項目填滿更多空間。如果兩個項目都有 flex-grow 值，則會根據該值的比例進行空間分配，這樣可以打造彈性的佈局設計。

flex-shrink 屬性讓你可以定義項目在容器過小時，如何進行縮小。

.item {
  flex-shrink: 1;
}

這代表當容器的空間不足時，此項目將按照比例縮小，以便適應新的尺寸，同樣1為倍數縮小系數，越大則縮小越多。

flex-basis 定義項目的初始大小，此屬性在 Flexbox 中的重要性不容小覷。

.item {
  flex-basis: 100px;
}

此屬性的意義在於你可以初始設定一個固定大小，而不需依賴項目的內容或容器大小。靈活地運用 flex-basis 能為你的佈局設計提供更多的控制力。

align-content 用以控制多列 Flex 容器的行間距對齊，與 justify-content 相似。

.container {
  align-content: space-around;
}

當 Flex 項目超過一行時，這個屬性就會開始發揮作用。它能調整行亭在對齊軸上的間距，適應多行布局中的空間分配需求。

透過掌握上述各類屬性，CSS Flexbox 能夠設計出簡單而強大的佈局。結合使用 display: flex 和各類對齊、排列屬性，能夠快速實現不同需求的 Web 介面。

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

隨著你對 Flexbox 的不斷練習，這些技巧將為你的開發工作帶來極大的便捷，並讓網頁佈局更加靈活且具操控性。