C2-09a - Layout:Flexbox - Webflow Academy 大師班

Flexbox 為您提供了對元素內所有內容的精確對齊和堆疊控制，解決了設計人員難以解決的許多佈局問題。

該視頻採用舊用戶界面。更新版本即將推出！

在本課中，您將了解：

Flexbox parent

Flexbox child

Flex parent setup

Flexbox child setup

Parent

flex parent 是父元素。您可以使用包含其他元素的任何元素創建彈性容器。要創建一個彈性父級：

選擇元素

在樣式面板>佈局中將顯示設置設置為flex

與其他顯示設置不同，在父元素上啟用 flex 會影響內部直接子元素的佈局。當您為父元素啟用 flex 顯示設置時，默認情況下，子元素左對齊並水平堆疊。

Flex 容器不會影響或更改子元素在其直接子元素中的佈局。

彈性兒童

一旦你把一個父元素變成了一個彈性容器，那個元素的直接子元素就變成了彈性子元素。要覆蓋 flex 子項的佈局設置，請選擇元素並調整佈局設置。

Flex 父級設置

將父元素的佈局設置更改為 flex 後，您將有許多用於 flex 父元素及其包含的子元素的佈局選項。

設置佈局方向

默認情況下，flex 父級的方向是水平的。您可以在樣式面板>佈局中的 flex 佈局設置中將方向切換為垂直。

反轉佈局方向

您可以在樣式面板>佈局中的方向設置中反轉 flex 父佈局的對齊方式。

反轉您的 flex 父級的佈局對於從右到左的站點以及需要在較小的斷點上反轉佈局時特別有用。

更新 flex 子元素的對齊方式

要更改 flex 父級中 flex 子級的對齊方式，請選擇 flex 父級，然後在佈局方向設置下選擇所需的對齊方式。

水平對齊選項

要水平對齊子元素，請選擇以下對齊選項之一：

開始

：項目左對齊

Center

：項目居中

End

: 項目右對齊

之間的空間

：項目從邊緣到邊緣均勻分佈

周圍空間

：項目沿元素和邊緣之間均勻分佈

垂直對齊選項

要垂直對齊 flex 子項，請選擇以下對齊選項之一：

開始

：項目與頂部對齊

Center

：項目垂直居中

End

：項目與底部對齊

Stretch

：項目被拉伸到 flex 容器的高度

基線

：項目與其基線對齊（文本所在的不可見線）

調整列和行之間的間距

間隙允許您指定 flex 子元素之間的空間，而無需添加邊距或填充。要調整列和行之間的間隙大小，請在樣式面板中輸入所需的間隙大小。

專業提示：要快速增加或減少間隙大小，請按住Option鍵（在 Mac 上）或Alt 鍵（在 Windows 上），然後在列或行大小字段上向左或向右拖動鼠標。

默認情況下，列和行之間的間隙被鎖定。這意味著如果您更改列的間隙大小，Webflow 會同時將行的間隙大小更改相同的量。

要獨立調整列和行之間的間隙空間，請單擊鎖定按鈕以解鎖列和行之間的關係。

‍很高興知道：您選擇的鎖定或解鎖在瀏覽器的設計器中始終存在。此選擇還會影響網格間隙的鎖定或解鎖狀態，反之亦然。

Flex兒童

默認情況下，flex 子項將始終嘗試適合單行。您可以通過使用佈局設置Wrap包裹子項來更改它。

水平對齊多行內容有不同的選項：

Start

: 行對齊到 flex 父級的頂部

Center

：行在 flex 父級內垂直居中

End

：行與容器底部對齊

拉伸

：行拉伸以填充空白的垂直空間

間距

：行從上到下邊緣均勻分佈

周圍空間

：行均勻分佈在其他行和邊緣之間

Flex Child setup

flex 子元素是任何 flex 父元素的直接子元素，它是顯示佈局設置為 flex 的任何元素。flex 子項的默認佈局基於 flex 容器上設置的 flex 佈局。

要為 flex 父級中的 flex 子級配置佈局，請選擇元素並更改大小、對齊方式和顯示順序。

更改 flex child 的大小

使用主要尺寸預設，您可以告訴 flex 子級它應該如何在 flex 父級中拉伸。每個 flex child 可以有自己的大小設置，允許許多佈局選項：

如果需要，收縮 flex child（以防止溢出）

如果可能的話，培養靈活的孩子

不要收縮或成長靈活的孩子

自定義增長和收縮行為

自定義增長和收縮行為

選擇“增長”選項以調整項目增長的大小。使其完全靈活，以便它們吸收任何額外的空間。

如果所有項目都是Grow、Shrink或Don't shrink or grow，則在調整項目大小後的任何剩餘空間都將平均分配給具有Grow的項目。

選擇“收縮”選項以根據項目的寬度/高度屬性（如果未設置，則為其內容）調整項目大小。

它使彈性項目在剩餘一些可用空間時變得不靈活，但在沒有足夠空間時允許它收縮到最小。對齊功能或自動邊距也可用於對齊彈性項目。

設置不收縮或增長選項以根據其寬度/高度屬性調整項目大小，但使其完全不靈活。這與 flex: initial 類似，只是它不允許收縮，即使在溢出情況下也是如此。

如果您選擇完全自定義元素的增長和收縮行為，您將輸入一個數字來確定 flex 子元素相對於其他子元素將收縮或增長多少。

設置Grow值以定義當父元素內的空閒空間被分配時，flex 子元素相對於其他子元素可以增長多少。如果該值設置為 0，則它不會增長到超出需要的值。

設置Shrink值以定義當分配負可用空間時 flex 子項相對於其他子項可以縮小多少。如果該值設置為 0，即使在溢出情況下也不會縮小。

您可以在 flex-grow 或 flex-shrink 發揮作用之前將Basis值設置為元素的默認大小。您可以將其設置為特定尺寸（例如，20%、250 像素等）或自動。如果設置為 Auto，則 flex 子項的默認大小將基於其寬度或高度（如果設置）或其內容。如果設置為特定尺寸，則元素的內容或寬度/高度將在 flex 子項之間共享大小之前被忽略。

改變一個彈性孩子的順序

當您希望移動設備用戶看到與桌面設備上的用戶不同的內容時，重新排序 flex 子項會派上用場。默認情況下，flex 子項的顯示順序與它們在源代碼中的放置順序相同。要覆蓋這一點，您可以使用訂單設置預設或自定義訂單選項。

彈性子訂單設置：

不要更改

：將 flex 子項保留在默認位置

First

: flex 子元素首先出現在 flex 容器中

Last

: flex 子元素最後出現在 flex 容器中

自定義 order

：通過定義自定義 order 值來控制幾個 flex 子項的顯示順序

自定義訂單

自定義順序可以定義為一個數字，它指定 flex 子項在 flex 容器中出現的順序。具有相同自定義 order 值的 Flex 子項將按照它們最初放置的順序排列。

使用自定義順序時，不要使用預設來指定列表中的第一個或最後一個元素。“First” 將 flex 子元素的順序設置為 -1，“Last” 將順序設置為 1。使用自定義順序時，任何大於 1 的數字都會將該元素放在順序設置為 last 的任何元素之後。任何小於 -1 的數字都會將該元素放在任何設置為 first 的元素之前。