Flexbox 是創建響應式且靈活的佈局的強大工具。在本文中，我們將探討 Flexbox 的關鍵屬性，這些屬性可以改變您在網頁上設計和排列元素的方式。每個部分都專注於不同的屬性以及如何有效地利用它。

Flexbox 入門
首先，我們設定一個基本佈局，在容器內包含 10 個不同顏色和編號的盒子。透過將 display: flex 應用於容器，我們將 div 元素變成了 flex 項，讓我們以各種方式控制和排列它們。 Flexbox 簡化了創建在所有螢幕尺寸上看起來都很棒的響應式設計的過程。

Flex-Direction：控制專案流程
flex-direction 屬性決定容器內彈性項目的方向。將其設為 row，我們從左到右水平排列框。其他值包括列、行反轉和列反轉，它們將排列調整為垂直或反轉順序。

Flex-Wrap：處理溢出
使用 flex-wrap 屬性，當單行中沒有足夠的空間時，我們允許框換行到多行。此屬性對於建立適應不同螢幕寬度的佈局至關重要。

順序：重新排列項目
order 屬性可讓您控制項目出現的順序，而不管它們在 HTML 中的原始順序為何。透過設定不同的訂單值，您可以根據需要重新排列項目。

Justify-Content：水平對齊專案
justify-content 屬性有助於沿著水平軸對齊和分配項目之間的空間。例如，space- Between 均勻分佈盒子，盒子之間的間距相等。

Align-Items：垂直對齊項目
align-items 屬性用於將項目沿著容器內的垂直軸居中或對齊。將其設定為居中會對齊中間的所有框，但它也可以將它們拉伸或對齊到容器的開頭或結尾。

Align-Content：對齊行
當內容換行為多行時，align-content 屬性會影響 Flex 容器內行的對齊方式。將其設為 flex-start 會在容器頂部對齊行，其他值（例如 center 和 space- Between ）提供不同的對齊選項。

Align-Self：自訂專案對齊方式
align-self 屬性允許單一項目覆蓋容器的對齊規則。例如，設定align-self：stretch使框擴展以填充可用空間，而其他值（如flex-end）調整其位置。

Flex：調整專案尺寸
Flex 屬性控制 Flex 項目相對於彼此的大小。透過對大多數盒子應用 flex: 1，它們佔用相同的空間，而為一個盒子設置 flex: 2 可以使其佔據其他盒子的兩倍空間。

Flex-Grow 與 Flex-Shrink：動態調整大小
flex-grow 和 flex-shrink 屬性管理容器內項目的成長和收縮方式。例如，flex-grow: 10 讓項目顯著擴展，而 flex-shrink: 5 則使其在空間有限時會縮小得更多。

結合 Flex-Wrap 和 Flex-Direction
最後，我們將 flex-wrap:wrap 與 flex-direction:column 結合起來，創建一個佈局，其中項目垂直堆疊並根據需要換行到新行。此設定展示了 Flexbox 有效處理複雜佈局的能力。

Flexbox 提供了一套強大的工具，用於設計響應式且靈活的 Web 版面。透過掌握這些屬性，您可以創建無縫適應各種螢幕尺寸和方向的佈局。