Bootstrap - Flex：初學者的全面指南

你好，有志於網頁開發的各位！我很興奮能成為你們在Bootstrap Flex系統世界中的導遊。作為一個教了多年計算機科學的人，我可以向你們保證，掌握Flex將會是你們網頁設計工具包中的一個遊戲規則改變者。那麼，讓我們一起潛入水中，揭開Flex的神秘面紗吧！

什麼是Bootstrap Flex？

在我們開始運用我們的編碼肌肉（雙關語！）之前，讓我們先了解Bootstrap Flex是什麼。Flex是Bootstrap中的一個強大的佈局系統，它能夠讓你輕鬆地創建灵活且響應式的设计。它就像一根魔杖，能夠按照你想要的方式排列你的網頁元素！

啟用flex行為

要開始使用Flex，我們首先需要啟用它。這就像在黑暗的房間裡先打開燈開關一樣。下面是如何操作的：

<div class="d-flex">
<!-- 你的flex項目放在這裡 -->
</div>

這個簡單的d-flex類將你的容器轉換為flex容器。這個容器中的所有內容現在都成為了flex項目。酷炫吧？

方向

現在我們已經啟用了Flex，來談談方向吧。在Flex的世界裡，你可以水平或垂直地排列你的項目。這就像在選擇書架（垂直）和傳送帶（水平）之間一樣。

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

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

在這個例子中，flex-row將項目水平排列（從左到右），而flex-column則將它們垂直堆疊（從上到下）。

對齊內容

在Flex中對齊內容就像在書架上排列書本一樣。你可以將它們推向開始、結尾、中心，或者平均分佈。我們來看看如何操作：

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

這些類會沿主軸不同地分佈flex項目。隨意試試它們，看看魔法發生！

對齊項目

當justify-content沿主軸工作時，align-items則處理交叉軸。把它想像成調整書架上書本的高度。以下是如何使用它：

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

這些類幫助你控制flex項目在flex容器內垂直對齊的方式。

自對齊

有時候，你希望一個項目脫穎而出，有不同的對齊方式。這時align-self就派上用場了：

<div class="d-flex">
<div class="align-self-start">開始</div>
<div class="align-self-center">中心</div>
<div class="align-self-end">結尾</div>
</div>

這讓個別的flex項目能夠有與其兄弟元素不同的對齊方式。

填充

flex-fill類就像一個海綿 - 它讓flex項目吸收所有可用空間：

<div class="d-flex">
<div class="flex-fill">帶有大量內容的flex項目</div>
<div class="flex-fill">flex項目</div>
<div class="flex-fill">flex項目</div>
</div>

所有帶有flex-fill的項目將具有相等的寬度，無論它們的內容如何。

成長和收縮

成長和收縮屬性控制flex項目的擴張或收縮。這就像在你的佈局中有橡膠帶：

<div class="d-flex">
<div class="flex-grow-1">成長</div>
<div>固定</div>
<div class="flex-shrink-1">收縮</div>
</div>

flex-grow-1項目將擴張以填滿可用空間，而flex-shrink-1將在必要時收縮。

自動邊距

Flex中的自動邊距就像魔法間隔。它們將flex項目互相推開：

<div class="d-flex">
<div class="mr-auto">左</div>
<div>中心</div>
<div class="ml-auto">右</div>
</div>

這創建了一個左-中-右的佈局，並具有自動間隔。

包裹

當你有太多的項目無法在同一行中放下時，flex-wrap會來救援：

<div class="d-flex flex-wrap">
<div>項目 1</div>
<div>項目 2</div>
<div>項目 3</div>
<div>項目 4</div>
<div>項目 5</div>
</div>

這讓項目在沒有空間時折行到下一行。

順序

order屬性讓你可以在不更改HTML的情況下重新排列flex項目。這就像對你的佈局有一個遙控器：

<div class="d-flex">
<div class="order-3">DOM中的第一個，佈局中的最後一個</div>
<div class="order-2">DOM中的第二個，佈局中的第二個</div>
<div class="order-1">DOM中的第三個，佈局中的第一個</div>
</div>

對齊內容

當你有多行flex項目時，align-content幫助你控制這些行的間距：

<div class="d-flex flex-wrap align-content-start" style="height: 200px;">
<div>項目</div>
<div>項目</div>
...
</div>

這對於創建類似於網格的佈局特別有用。

媒體對象

最後，讓我們看看一個實際的例子 - 媒體對象。這是網頁設計中的一個常見模式，而Flex讓它變得非常簡單：

<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
這是來自媒體組件的一些內容。你可以將其替換為任何內容，並按需調整。
</div>
</div>

這創建了一個帶有左側圖片和右側內容的灵活媒體對象。

以上就是Bootstrap Flex系統的全部內容！記住，熟能生巧，所以不要害怕嘗試這些屬性。在你還未意識到之前，你將能夠像專業人士一樣創建出灵活、響應式的佈局！

這裡是一個總結我們所涵蓋的所有Flex屬性的表格：

屬性	描述	示例類
啟用Flex	將容器轉換為flex容器	d-flex
方向	設定flex容器的主軸	flex-row, flex-column
對齊內容	沿主軸對齊項目	justify-content-start, justify-content-end, justify-content-center, justify-content-between, justify-content-around
對齊項目	沿交叉軸對齊項目	align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch
自對齊	對齊個別項目	align-self-start, align-self-center, align-self-end
填充	讓項目吸收可用空間	flex-fill
成長	讓項目擴張	flex-grow-1
收縮	讓項目收縮	flex-shrink-1
自動邊距	在項目之間創建間隔	mr-auto, ml-auto
包裹	讓項目折行到下一行	flex-wrap
順序	改變項目的順序	order-1, order-2, 等。
對齊內容	對齊flex行	align-content-start, align-content-end, 等。

祝你在網頁設計的未來中快樂地使用Flex，未來的網頁設計超級巨星！

Credits: Image by storyset