CSS - Flexbox：初學者的靈活盒狀佈局指南

大家好，未來的 CSS 大師們！我很興奮能成為你們在 CSS Flexbox 世界的導遊。作為一個教了多年計算機科學的人，我可以告訴你們，Flexbox 是那些改變遊戲規則的工具之一，它將使你的網頁設計生活變得更加輕鬆。那麼，讓我們一起來探索吧！

CSS Flexbox 是什麼？

想像你正在一個房間裡佈置家具。你希望一切都能完美地 fitting，但同時也希望能夠輕鬆地移動它們。CSS Flexbox 對網頁佈局的作用正是如此！它是一種佈局模型，讓你能夠設計靈活的響應式佈局結構，而不需要使用 floats 或定位。

Flexbox 可以讓你輕鬆地：

• 垂直和水平對齊項目
• 不更改 HTML 的情況下重新排序項目
• 創建靈活的容器元素

Flexbox 的元素

在我們開始編碼之前，讓我們了解 Flexbox 的兩個主要組件：

1. Flex 容器：這是包含所有 flex 項目的父元素。
2. Flex 項目：這些是 flex 容器內的子元素。

把它想像成一個裡面有玩具（項目）的盒子（容器）。你如何佈置這些玩具取決於你如何設定你的 Flexbox 屬性。

基本的 Flexbox 佈局

讓我們從一個簡單的例子開始：

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

.flex-container {
display: flex;
}

.flex-item {
padding: 20px;
background-color: #f1f1f1;
margin: 10px;
}

在這個例子中，我們創建了一個包含三個 flex 項目的 flex 容器。容器上的 display: flex; 屬性是激活 Flexbox 的關鍵。

垂直 Flexbox 佈局

想要垂直堆疊你的項目嗎？這簡直易如反掌！

.flex-container {
display: flex;
flex-direction: column;
}

這個 flex-direction: column; 屬性將主軸改為垂直，將你的項目從上到下堆疊。

Flexbox Justify Content 屬性

現在，讓我們來談談定位。justify-content 屬性沿主軸對齊項目，並接受以下值：

值	描述
flex-start	項目被打包到 flex-direction 的開始方向
flex-end	項目被打包到 flex-direction 的結束方向
center	項目沿線居中
space-between	項目在線上平均分佈
space-around	項目平均分佈，並且圍繞它們的間距相等

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

這將使你的項目在容器中平均分佈。

Flexbox Align Items 屬性

當 justify-content 沿主軸工作時，align-items 沿交叉軸工作。它接受以下值：

值	描述
stretch	項目被拉伸以適合容器（默認）
flex-start	項目被放置在交叉軸的開始位置
flex-end	項目被放置在交叉軸的結束位置
center	項目在交叉軸上居中
baseline	項目對齊，使其基線對齊

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

這將在容器內垂直居中所有項目。

使用 Flexbox 中心對齊 Div

這裡有一個小技巧：使用 Flexbox 水平垂直居中一個 div 是一件轻而易舉的事情！

.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* 或任何高度 */
}

Flexbox Wrap 屬性

有時候，你可能希望你的項目在不夠空間的情況下折行到下一行。這就是 flex-wrap 的用處：

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

這允許項目在沒有足夠空間時折行到下一行。

Flexbox Align Self 屬性

如果你想要對一個項目進行不同的對齊，該怎麼辦？align-self 來拯救！

.flex-item:nth-child(2) {
align-self: flex-end;
}

這將第二個項目對齊到容器的底部，無論其他項目如何。

CSS Flexbox 容器屬性

這裡是你可以應用於容器的所有 Flexbox 屬性的表格：

屬性	描述
display	定義一個 flex 容器
flex-direction	定義 flex 項目的方向
flex-wrap	指定 flex 項目是否應該折行
flex-flow	flex-direction 和 flex-wrap 的簡寫
justify-content	沿主軸對齊 flex 項目
align-items	沿交叉軸對齊 flex 項目
align-content	在容器中有額外空間時對齊 flex 行

那你就有啦！你剛剛在 CSS Flexbox 的世界中邁出了第一步。記住，就像學騎自行車一樣，起初可能會有些晃動，但隨著練習，你會很快騎得飛快。

不要害怕嘗試這些屬性。最好的學習方式就是實踐。嘗試創建有不同的佈局，玩弄這些屬性，看看會發生什麼。在你意識到之前，你將能夠輕鬆地創建有美麗、靈活的佈局！

祝你好運，未來的 CSS 大師們！

Credits: Image by storyset