前言
傳統的 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
斷點
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | - | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
方向性
透過通用類別來設定 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
