Flexbox – 對齊和分配空間的現代方式

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

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

1.什麼是 Flexbox？

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

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

2.魔法從顯示開始：flex

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

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

.flex-container {
    display: flex;
}

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

3.彎曲方向 – 我們該走哪條路？

預設情況下，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 範例

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

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

.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 均勻分佈。
• 所有項目都在容器中垂直居中，並使用align-items: center。
• 由於 flex-grow，每個項目都會增長以均勻地填充可用空間：1.

8.為什麼 Flexbox 如此受歡迎

Flexbox 消除了我們過去在 CSS 中遇到的佈局設計的複雜性。不再有浮動，不再擔心清理，響應式設計變得更簡單！

要點：

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

在 LinkedIn 上關注我-

裡多伊‧哈桑

以上是Flexbox – 對齊和分配空間的現代方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！