一文搞懂flex（彈性盒佈局）

.NET快速开发框架發表於2024-11-27
Flex

1、什麼是彈性佈局

Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex佈局。

她是一種現代的CSS佈局方式，透過使用display: flex屬性來建立一個彈性容器，可以自動適配各種裝置的不同寬度，而不必依賴於傳統的塊狀佈局和浮動定位，並在其中使用靈活的盒子模型來進行元素的排列和定位。

在瀏覽器支援完美的環境中，選擇使用彈性盒子的原因是你希望把一系列專案沿著同一方向佈局。因為在放置元素過程中，你想控制元素在那個方向的維度，或者控制它們彼此之間的間距。彈性盒子就是為此設計的。

2、彈性佈局的特點

  • 主軸與交叉軸：彈性容器具有主軸（main axis）和交叉軸（cross axis）。預設情況下，主軸是水平方向，交叉軸是垂直方向。

  • 彈性容器：透過將父元素的display屬性設定為flex或inline-flex來建立彈性容器。

  • 子元素的彈性專案：彈性容器中的每個子元素都成為彈性專案。子元素可以指定各自在主軸和交叉軸上的大小、順序以及對齊方式等。

  • 主軸對齊：彈性專案可以在主軸上按照一定比例分配空間，也可以使用justify-content屬性定義主軸的對齊方式。

  • 交叉軸對齊：彈性專案可以在交叉軸上進行對齊，包括頂部對齊、底部對齊、居中對齊等，使用align-items屬性定義交叉軸對齊方式。

  • 換行與自動調整：可控制彈性專案是否換行，並且具備自動調整元素大小的能力。

  • 彈性佈局簡化了網頁佈局的開發過程，提供了更靈活、響應式的佈局方式。它適用於各種螢幕尺寸和裝置型別，並能夠快速適應不同的佈局需求。

彈性佈局

3、Flex容器

我們把一個容器的 display 屬性值改為 flex 或者 inline-flex 之後，該容器就變成了 Flex 容器，而容器中的直系子元素就會變為 flex 元素。如下程式碼所示，parent 元素就是 Flex 容器，son 元素就是 Flex 元素。

Flex容器

<style>
#parent {
    display: flex;
}
</style>
<div id="parent">
    <div id="son"></div>
</div>

由於所有 CSS 屬性都會有一個初始值，所以 flex 容器中的所有 flex 元素都會有下列行為：

  • 元素排列為一行（flex-direction 屬性的初始值是 row）。
  • 元素從主軸的起始線開始。
  • 元素不會在主維度方向拉伸，但是可以縮小。
  • 元素被拉伸來填充交叉軸大小。
  • flex-basis 屬性為 auto。
  • flex-wrap 屬性為 nowrap。

4、Flex容器屬性

Flex容器屬性

4.1、flex-direction：決定主軸的方向（即專案的排列方向）

.box {
   flex-direction: row | row-reverse | column | column-reverse;
}

如果你選擇了 row 或者 row-reverse，那麼主軸（Main Axis）就是橫向的 X 軸，交叉軸（Cross Axis）就是豎向的 Y 軸，如下圖所示。

主軸是橫向的X軸，交叉軸是豎向的Y軸

如果你選擇了 column 或者 column-reverse，那麼主軸（Main Axis）就變成是豎向的 Y 軸，交叉軸（Cross Axis）就是橫向的 X 軸，如下圖所示。

主軸是豎向的Y軸，交叉軸是橫向的X軸

  • row（預設值）：主軸為水平方向，起點在左端。
  • row-reverse：主軸為水平方向，起點在右端。
  • column：主軸為垂直方向，c起點在上沿。
  • column-reverse：主軸為垂直方向，起點在下沿。

flex-direction：決定主軸的方向（即專案的排列方向）

4.2、flex-wrap：定義換行情況

  • nowrap（預設）：不換行。
  • wrap：換行，第一行在上方。
  • wrap-reverse：換行，第一行在下方。

flex-wrap：定義換行情況

預設元素排列在一條軸線上，如果一條軸線排不下，此時就可以用flex-wrap屬性處理。

.box{
   flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap（預設）：不換行

nowrap（預設）：不換行

  • wrap：換行，第一行在上方
    wrap：換行，第一行在上方

  • wrap-reverse：換行，第一行在下方

wrap-reverse：換行，第一行在下方

4.3、justify-content：定義專案在主軸上的對齊方式

justify-content 屬性用來使元素在主軸方向上對齊，它的初始值是 flex-start，即元素從容器的起始線排列。justify-content 屬性有如下 5 個不同的值：

  • flex-start（預設值）：左對齊、從起始線開始排列，預設值。
  • flex-end：右對齊、從終止線開始排列。
  • center： 居中、在中間排列。
  • space-between：兩端對齊，專案之間的間隔都相等。
  • space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。

justify-content

對齊方式與軸的方向有關，本文中假設主軸從左到右。

.box {
   justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline;
}
  • flex-start（預設值）：左對齊

左對齊

  • flex-end：右對齊

右對齊

  • center：居中

居中對齊

  • space-between：兩端對齊，專案之間間隔相等

兩端對齊

  • space-around：每個專案兩側的間隔相等，即專案之間的間隔比專案與邊框的間隔大一倍

兩側間隔相等

4.4、align-items：定義在交叉軸上的對齊方式

align-items 屬性可以使元素在交叉軸方向對齊，它的初始值是 stretch，即拉伸到最高元素的高度。align-items 屬性有如下 5 個不同的值：

  • flex-start：交叉軸的起點對齊。
  • flex-end：交叉軸的終點對齊。
  • center：交叉軸的中點對齊。
  • baseline: 專案的第一行文字的基線對齊。
  • stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

align-items

對齊方式與交叉軸的方向有關，假設交叉軸從下到上。

.box{
    align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start：起點對齊

起點對齊

  • flex-end：終點對齊

終點對齊

  • center：中點對齊

中點對齊

  • baseline：專案的第一行文字的基線對齊

基線對齊

  • stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度

stretch（預設值）

4.5、align-content：定義多根軸線的對齊方式

定義了多根軸線的對齊方式，如果專案只有一根軸線，那麼該屬性將不起作用

  • flex-start：與交叉軸的起點對齊。
  • flex-end：與交叉軸的終點對齊。
  • center：與交叉軸的中點對齊。
  • space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
  • space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
  • stretch（預設值）：軸線佔滿整個交叉軸。

如果專案只有一根軸線，該屬性不起作用。
所以，容器必須設定flex-wrap：···；

.box{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start：與交叉軸的起點對齊

起點對齊

  • flex-end：與交叉軸的終點對齊

終點對齊

  • center：與交叉軸的中點對齊

中點對齊

  • space-between：與交叉軸的兩端對齊，軸線之間的間隔平均分佈

軸線之間等間距

  • space-around：每根軸線兩側的間隔相等，即軸線之間的間隔比軸線與邊框的間隔大一倍

軸線兩側等間距

  • stretch（預設值）：軸線佔滿整個交叉軸。

專案未設定高度時

當你不給專案設定高度但是給容器設定align-content不為stretch時，同一軸線上的專案的高度將等於專案中高度最高的專案。

img

4.6、align-content 和 align-items 區別

  • align-items 適用於單行情況下，只有上對齊、下對齊、居中和 拉伸。
  • align-content適應於換行(多行)的情況下(單行情況下無效)，可以設定上對齊、下對齊、居中、拉伸以及平均分配剩餘空間等屬性值。
  • 總結就是單行找 align-items 多行找 align-content。

align-content 和 align-items 區別

5、專案屬性（Item）

設定在專案上的屬性也有6個。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

專案屬性

5.1、order屬性：定義專案的排列順序

數值越小，排列越靠前，預設為0，可以是負值。

.item {
    order: <整數>;
}

order屬性：定義專案的排列順序

5.2、flex-grow屬性

flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。

.item{
    flex-grow: <數字>;
}

如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果一個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。

flex-grow屬性

5.3、flex-shrink屬性

flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。

.item {
  flex-shrink: <number>; /* default 1 */
}

flex-shrink屬性

如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。

負值對該屬性無效。

5.4、align-self屬性

align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

align-self屬性

看到這裡，關於 Flex 佈局的核心點就介紹得差不多了。掌握好這幾個核心的知識點，再去實踐練習基本上沒有什麼太大的問題。剩下一些比較小眾的屬性，等用到時再去查檢視就是了。

6、參考資料

彈性盒子-https://developer.mozilla.org/zh-CN/docs/Glossary/Flexbox

彈性盒佈局-https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox

FlexTest-https://flexbox.help/

Flex 佈局教程：語法篇

Flexbox 佈局的最簡單表單

【保姆級教程】Vue專案除錯技巧

乾貨|工作中要使用Git，看這篇文章就夠了

Vue 前端開發團隊風格指南（史上最全）

企業數字化轉型如何做？看過來

乾貨-Vue3 元件通訊方式詳解

【長文】帶你搞明白Redis

相關文章