F2E合作社｜flex屬性控制｜Bootstrap 5網頁框架開發入門

前言

傳統的 float 雖然也可以解決多種排版，但對於現在更加多元的排版方式已經顯得不夠，而 flex 是 CSS3 新的佈局模式，更適合響應式的設計，也更能彈性的完成多種排版，在 Bootstrap 3 轉 Bootstrap 4 時，也捨棄了浮動，改成用 flex 來佈局。

之前也有寫過相關文章，所以這裡只會簡略說明，想看更詳盡的介紹 這邊 歡迎光臨！

（ 圖片來源 ）

官方網站的 Flex 頁面

啟用 flex

使用 display 通用類別來創建一個 flexbox 容器。

.d-flex 和 .d-inline-flex 也包含響應式的變化。

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex
• .d-xxl-flex
• .d-xxl-inline-flex

斷點

方向性

透過通用類別來設定 flex 容器與內層 flex 的方向。

使用 .flex-row 來設定水平的方向（ 瀏覽器預設值 ），或使用 .flex-row-reverse 來作水平方向的反轉。

<div class="d-flex flex-row">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
    <div>Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
    <div>Flex item 3</div>
</div>

使用 .flex-column 設置垂直方向，或使用 .flex-column-reverse 作垂直方向的反轉。

<div class="d-flex flex-column">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
    <div>Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
    <div>Flex item 3</div>
</div>

flex-direction 的響應式變化。

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .flex-sm-row
• .flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .flex-xl-column-reverse
• .flex-xxl-row
• .flex-xxl-row-reverse
• .flex-xxl-column
• .flex-xxl-column-reverse

調整內容

使用 flexbox 容器上的 justify-content 通用類別改變 flex 物件在主軸上的對齊。從 start 、 end 、 center 、 between 、 around 或 evenly 中做選擇。

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

justify-content 的響應式變化。

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-evenly
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-sm-evenly
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-md-evenly
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-lg-evenly
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around
• .justify-content-xl-evenly
• .justify-content-xxl-start
• .justify-content-xxl-end
• .justify-content-xxl-center
• .justify-content-xxl-between
• .justify-content-xxl-around
• .justify-content-xxl-evenly

對齊物件

在 flexbox 容器上使用 align-items 工具改變橫軸上 flex 物件的對齊，從 start 、 end 、 center 、 baseline 或是 stretch 中做選擇。

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

align-items 包含的響應式變化。

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch
• .align-items-xxl-start
• .align-items-xxl-end
• .align-items-xxl-center
• .align-items-xxl-baseline
• .align-items-xxl-stretch

自身對齊

使用 flexbox 物件上的 align-self 通用類別單獨改變在橫軸上的對齊。與 align-items 相同的選項中選擇： start 、 end 、 center 、 baseline 或是 stretch 。

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

align-self 的響應式變化。

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch
• .align-self-xxl-start
• .align-self-xxl-end
• .align-self-xxl-center
• .align-self-xxl-baseline
• .align-self-xxl-stretch

填滿

在一系列的同級元素上使用 .flex-fill 來強制設定它們的寬度與內容相等（ 如果它們的內容不超過邊框，則各個寬度相等 ），同時佔用所有可用的水平空間。

<div class="d-flex">
    <div class="flex-fill red"></div>
    <div class="flex-fill green"></div>
    <div class="flex-fill blue"></div>
</div>

flex-fill 同樣包含響應式的變化。

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-fill
• .flex-xxl-fill

伸縮值

使用 .flex-grow-* 通用類別來切換 flex 項目彈性增長、填充可用空間的能力。

<div class="d-flex">
    <div class="flex-grow-1">Flex item</div>
    <div>Flex item</div>
    <div>Third flex item</div>
</div>

如果需要，使用 .flex-shrink-* 通用類別來切換項目的縮小能力。

<div class="d-flex">
    <div>Flex item</div>
    <div class="flex-shrink-1">Flex item</div>
</div>

flex-grow 和 flex-shrink 也包含響應式的變化。

• .flex-{grow|shrink}-0
• .flex-{grow|shrink}-1
• .flex-sm-{grow|shrink}-0
• .flex-sm-{grow|shrink}-1
• .flex-md-{grow|shrink}-0
• .flex-md-{grow|shrink}-1
• .flex-lg-{grow|shrink}-0
• .flex-lg-{grow|shrink}-1
• .flex-xl-{grow|shrink}-0
• .flex-xl-{grow|shrink}-1
• .flex-xxl-{grow|shrink}-0
• .flex-xxl-{grow|shrink}-1

自動的 margin

Flex 對齊與 auto margin 可以混用， Flexbox 可以執行一些令人驚艷的功能。其他項目向右推（ .me-auto ）、其他項目向左推（ .ms-auto ）、其他項目向下推（ .mb-auto ）、其他項目向上推（ .mt-auto ）。

<div class="d-flex">
    <div class="me-auto red">red</div>
    <div class="green">green</div>
    <div class="blue">blue</div>
</div>

<div class="d-flex">
    <div class="red">red</div>
    <div class="green">green</div>
    <div class="ms-auto blue">blue</div>
</div>

換行

改變 Flex 項目在 Flex 容器中換行的方式。使用 .flex-nowrap 不換行，使用 .flex-wrap 進行換行，或使用 .flex-wrap-reverse 進行反向換行。

<div class="d-flex flex-nowrap"></div>
<div class="d-flex flex-wrap"></div>
<div class="d-flex flex-wrap-reverse"></div>

flex-wrap 也包含響應式變化。

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse
• .flex-xxl-nowrap
• .flex-xxl-wrap
• .flex-xxl-wrap-reverse

排序

使用 order 通用類別改變特定 flex 項目顯示的排序，由於 order 只能使用從 0 到 5 的整數值，任何額外值則需要自定義的 CSS 。

<div class="d-flex flex-nowrap">
    <div class="order-5">藍</div>
    <div class="order-4">綠</div>
    <div class="order-3">黃</div>
    <div class="order-2">橙</div>
    <div class="order-1">紅</div>
    <div>靛</div>
    <div>紫</div>
</div>

order 也包含的響應式屬性。

• .order-0
• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xxl-0
• .order-xxl-1
• .order-xxl-2
• .order-xxl-3
• .order-xxl-4
• .order-xxl-5

此外還有響應式的 .order-first 和 .order-last 類別，它們分別透過 order: -1 和 order: 6 ，來更改元素的 order 順序。

• .order-first
• .order-last
• .order-sm-first
• .order-sm-last
• .order-md-first
• .order-md-last
• .order-lg-first
• .order-lg-last
• .order-xl-first
• .order-xl-last
• .order-xxl-first
• .order-xxl-last

對齊內容

使用 flexbox 容器上的 align-content 通用類別將 flex 項目一起對齊於橫軸上。從 start 、 end 、 center 、 between 、 around 或 stretch 中選擇。

注意！此特性對於單行的 Flex 項目沒有作用。

<div class="d-flex align-content-start"></div>
<div class="d-flex align-content-end"></div>
<div class="d-flex align-content-center"></div>
<div class="d-flex align-content-between"></div>
<div class="d-flex align-content-around"></div>
<div class="d-flex align-content-stretch"></div>

align-content 也包含響應式變化。

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-around
• .align-content-xl-stretch
• .align-content-xxl-start
• .align-content-xxl-end
• .align-content-xxl-center
• .align-content-xxl-around
• .align-content-xxl-stretch

參考資料

1. Flex · Bootstrap v5.0
2. Flex · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
3. Flex控制太簡單-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學