第 14 講：Flexbox – 對齊與分配空間的現代方式

嘿！準備好深入研究 CSS 中最酷、最強大的工具之一了嗎？今天，我們將探索Flexbox。如果您曾經在以簡潔且響應迅速的方式對齊專案或分配空間方面遇到困難，Flexbox 是您最好的新朋友。

1.什麼是 Flexbox？

Flexbox（靈活框佈局）是一種一維佈局系統，可讓您控制容器內元素的對齊、間距和分佈 - 即使這些元素的大小未知或動態。

將 Flexbox 視為一個工具箱，用於建立可以根據可用空間拉伸、收縮或對齊的佈局。

2.魔法從顯示開始：flex

要開始使用 Flexbox，您只需在容器上設定 display: flex 即可。一旦你這樣做了，該容器的所有直接子代都會變成彈性項目，並且它們將立即開始表現不同。

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
}

現在，.flex-container 內的所有項目都是 Flex 項目，可以輕鬆操作。

3. Flex Direction – 我們該走哪條路？

預設情況下，Flexbox 將項目排列在一行（水平）中，但如果您希望將它們排列在一列（垂直）中怎麼辦？ Flexbox 透過 flex-direction 屬性為您提供完全控制。

• 行：在水平行中對齊項目（這是預設值）。
• 列：將項目堆疊在垂直列。
• row-reverse：與row相同，但專案的順序相反。
• column-reverse：與column相同，但專案以相反的順序堆疊。

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

現在，物品將垂直堆疊！

4.證明內容的合理性－傳播事物

假設您有三件物品，並且您想將它們均勻地分佈在容器中。這就是 justify-content 派上用場的地方。

• flex-start：項目與容器的開頭對齊（預設）。
• center：計畫居中。
• space- Between：專案均勻分佈，第一個專案在開始，最後一個專案在結束。
• space-around：項目在每個項目周圍以相等的填充間隔。

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

現在，項目將在容器內均勻分佈。

5.對齊項目 – 垂直魔法

justify-content 控制水平對齊，而 align-items 負責垂直對齊（或沿橫軸）。以下是您的選擇：

• 拉伸：項目拉伸以填充容器（預設）。
• flex-start：項目與頂部對齊。
• flex-end：項目與底部對齊。
• center：專案垂直居中。

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

現在，所有項目都將在容器內垂直居中。

6。 Flex-Grow、Flex-Shrink 和 Flex-Basis – 微調 Flex 專案

有時，您希望某些項目增大、縮小或具有固定的起始尺寸。 flex-grow、flex-shrink 和 flex-basis 屬性可讓您控制該行為：

• flex-grow：控制一個專案相對於其他專案應該成長多少。
• flex-shrink：控制一個項目相對於其他項目應收縮的程度。
• flex-basis：設定項目在增大或縮小之前的初始大小。

例子：

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;
}

這可確保專案從 100 像素開始，但如果需要，它可以成長以填充額外的空間，而不會縮小。

7.實務上的 Flexbox 範例

讓我們用一個例子將所有這些放在一起！

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    background-color: #f0f0f0;
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    flex-grow: 1;
}

在此範例中：

• 項目排列成行。
• 它們透過 justify-content: space-around 均勻分佈。
• 所有項目都在容器中垂直居中，對齊項目：center。
• 由於 flex-grow，每個項目都會成長以均勻地填充可用空間：1.

8.為什麼 Flexbox 如此受歡迎

Flexbox 消除了我們過去在 CSS 中苦苦掙扎的佈局設計的大部分複雜性。不再有浮動，不再擔心清理，響應式設計更容易！

要點：

• 使用display: flex將容器變成Flex容器。
• 使用flex-direction設定流向（行或列）。
• 使用justify-content和align-items來控制間距和對齊。
• 使用 flex-grow、flex-shrink 和 flex-basis 微調 Flex 專案。

在 LinkedIn 上關注我-

裡多伊‧哈桑