Docs99

Appearance

Return to top
On this page

Flexbox 彈性盒子

說明

可以彈性的適應不同裝置尺吋，去填補空間或在「一度空間」中，客製化調整排版。

圖片出處

容器屬性

可以在「容器」屬性設置，來調整「項目」們的排版。

結構

html
<div class="flex-container border-dashed">
  <div class="flex-item bg-base pa-1 rounded text-center">1</div>
  <div class="flex-item bg-base pa-1 rounded text-center">2</div>
  <div class="flex-item bg-base pa-1 rounded text-center">3</div>
  <div class="flex-item bg-base pa-1 rounded text-center">4</div>
</div>

├ 🔴 使用「彈性盒子」模式 (必填)

在容器 (父層) 定義 display: flex; 使用 flexbox 排版，啟動後 「項目」的 block 就會變的不佔據區塊，而可以被自由調整排版。

一般狀態

1
2
3
4

使用彈性盒子模式

1
2
3
4
css
.flex-container {
  display: flex;
}

├ ➡️⬅️⬇️⬆️ flex-direction 資料流

可以定義「容器」 內 「項目」排序流向的 主軸 與 方向。

value:

  • row 水平主軸，由左開始 (預設值)
  • row-reverse 水平主軸，反轉 (由右開始)
  • column 垂直主軸，由「頂部」開始
  • column-reverse 垂置主軸，反轉 (由「底部」開始)

水平主軸，由左開始 row

1
2
3
4
資料流 →
css
.flex-container {
  display: flex;
  flex-direction: row;
}

水平主軸，反轉 (由右開始) row-reverse

1
2
3
4
← 資料流
css
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

垂直主軸，由「頂部」開始 column

1
2
3
4
資料流 ↓
css
.flex-container {
  display: flex;
  flex-direction: column;
}

垂置主軸，反轉 (由「底部」開始) column-reverse

1
2
3
4
資料流 ↑
css
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

├ 主軸對齊方式 justify-content

當定義了 資料流 flex-direction 同時決定了「主軸」，而可以藉由 justify-content 來對這個「主軸」做對齊方式的設置。

下列以 水平主軸，由左開始 flex-direction: row; 為例子顯示:

value:

  • flex-start 靠左 (預設值)
  • flex-end 靠右
  • center 置中
  • space-between 分散
  • space-around 分散 (左、右 1/2，其它均分空間)
  • space-evenly 均分所有空間

靠左 flex-start

1
2
3
4
css
.flex-container {
  display: flex;
  justify-content: flex-start;
}

靠右 flex-end

1
2
3
4
css
.flex-container {
  display: flex;
  justify-content: flex-end;
}

置中 center

1
2
3
4
css
.flex-container {
  display: flex;
  justify-content: center;
}

分散 space-between

1
2
3
4
css
.flex-container {
  display: flex;
  justify-content: space-between;
}

分散 (左、右 1/2，其它均分空間) space-around

1
2
3
4
css
.flex-container {
  display: flex;
  justify-content: space-around;
}

均分所有空間 space-evenly

1
2
3
4
css
.flex-container {
  display: flex;
  justify-content: space-evenly;
}

提醒

justify-content MDNflex-start、 flex-end 寫做 start 、 end 也是不影響。

├ 次軸對齊方式 align-items

定義了 資料流 flex-direction 同時決定了「主軸」，與「主軸」垂直的方向就為「次軸」，而 align-items 可以為其定義對齊方向。

下列以 水平主軸，由左開始 flex-direction: row; 為例子顯示:

value:

  • stretch 拉撐 (預設)
  • flex-start 靠上
  • flex-end 靠下
  • center 置中
  • baseline 靠上，內容對齊

拉撐 stretch

1
2
3
4
css
.flex-container {
  display: flex;
  align-items: stretch;
}

靠上 start

1
2
3
4
css
.flex-container {
  display: flex;
  align-items: flex-start;
}

靠下 end

1
2
3
4
css
.flex-container {
  display: flex;
  align-items: flex-end;
}

置中 center

1
2
3
4
css
.flex-container {
  display: flex;
  align-items: center;
}

靠上，內容對齊 baseline

「項目」靠上，再以「最高項目」為基準，所有「項目」的文字內容向它對齊。

1
2
3
4
css
.flex-container {
  display: flex;
  align-items: baseline;
}

└ 換行設置 flex-wrap

當使用 flex 模式，所有「項目」就會被撐滿在「容器」之中，無視「項目」的寬度，只會被塞在一行裡。但可以透過這個屬性，恢復「項目」原有的寬度、超過 自動 換行。

value:

  • nowrap 不換行 **(預設值)
  • wrap 換行
  • wrap-reverse 主軸起、終點反轉換行

不換行 nowrap

1
2
3
4
5
6
7
8
css
.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
css
.item {
  width: 150px;
}

換行 wrap

1
2
3
4
5
6
7
8
css
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
css
.item {
  width: 150px;
}

主軸起、終點反轉換行 wrap-reverse

1
2
3
4
5
6
7
8
css
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}
css
.item {
  width: 150px;
}

項目屬性

可以在「項目」設置相關屬性，來調整排版。

html
<div class="flex-container border-dashed">
  <div class="flex-item bg-base pa-1 rounded text-center">1</div>
  <div class="flex-item bg-base pa-1 rounded text-center">2</div>
  <div class="flex-item bg-base pa-1 rounded text-center">3</div>
  <div class="flex-item bg-base pa-1 rounded text-center">4</div>
</div>

├ 次軸對齊方式 align-self

藉由 align-self 直接對「項目」調整 次軸 對齊方式，優先權會大於在「容器」調整的 次軸對齊方式 align-items。

value:

  • stretch 拉撐 (預設值，若align-items 無特別設置)
  • flex-start 靠上
  • flex-end 靠下
  • center 置中
  • baseline 對齊 align-items 內容

拉撐 stretch

1
2
3
self
css
.flex-container {
  display: flex;
  align-items: center;
}
css
.self {
  align-self: stretch;
}

靠上 flex-start

1
2
3
self
css
.flex-container {
  display: flex;
  align-items: center;
}
css
.self {
  align-self: start;
}

靠下 flex-end

1
2
3
self
css
.flex-container {
  display: flex;
  align-items: center;
}
css
.self {
  align-self: end;
}

置中 center

1
2
3
self
css
.flex-container {
  display: flex;
}
css
.self {
  align-self: center;
}

對齊 align-items 內容 baseline

1
2
3
self
css
.flex-container {
  display: flex;
  align-items: center;
}
css
.self {
  align-self: baseline;
}

├ 主軸空白伸展 flex-grow

當「項目」總寬度小於「容器」寬度時，會產生 空白 的空間，而 flex-grow 可以決定哪個「項目」分配多少這個 空白 空間的比例。

使用說明

所有 「項目」 設置的 flex-grow 數字 加總 等於空白空間，各別「項目」再依本身設置的 flex-grow 數字來分配空間份數。

1
2
flex-grow-0
4
空白空間

value number (不可為負數):

  • 0 (預設值)
  • 1 ~ ...

單「項目」設置

只有一個「項目」設置 flex-grow: 1;, 空白空間共分為 1 等分，而 .orange 分配 1 等份 (就是全部)。

1
2
flex-grow-1
4
css
.orange {
  flex-grow: 1;
}

多「項目」設置

所有「項目」 flex-grow 加總為 3 (1 + 2)，空白空間分 3 等份，.orange 分配當中的 1 等分、.pink 分配到 2 分。

1
2
flex-grow-1
flex-grow-2
css
.orange {
  flex-grow: 1;
}

.pink {
  flex-grow: 2;
}

提示

當容器高度是被 flex-grow: 1 撐滿時，使用 overflow: auto 是無效的，因為父層沒有高度可以被視別。可以在 flex-grow: 1 容器中加入 height: 0; 就使用 overflow 效果。

├ 主軸空間收縮 flex-shrink

當「容器」x 軸空間不足時，可以在「項目」設置 flex-shrink 來指定可以被收縮的佔比。

1
2
3
4

value number (不可為負數):

  • 1 (預設值) 收縮佔比
  • 0 不被收縮

不被收縮

在 .green 設置 flex-shrink: 0; 可以保證其不被「收縮」，保有原本設置的寬度，當「容器」寬度變窄，會先收縮其它「項目」的寬度。

flex-shrink-0
2
3
4
css
.green {
  width: 300px;
  flex-shrink: 0;
}

指定收縮

當 .orange 設置 flex-shrink: 3;，其它「項目」為預設值，當「容器」變窄時， .orange 被收縮的量為 3/6 等份。

1
2
3
4
css
.orange {
  flex-shrink: 3;
}

└ 主軸初始尺吋 flex-basis

依不同的「主軸」設定，決定不同的方向的尺吋，flex-basis 優先權大於 width (height)。

value:

  • auto 根據「項目」決定大小。
  • % 指定比例
  • px.. 指定尺吋

不同主軸不同結果

主軸 row

25%
50%
25%
css
.flex-container {
  display: flex;
}
css
.green {
  flex-basis: 25%;
}
.orange {
  flex-basis: 25%;
}
.blue {
  flex-basis: 50%;
}

主軸 column

25%
50%
25%
css
.flex-container {
  display: flex;
  flex-direction: column;
}
css
.green {
  flex-basis: 25%;
}
.orange {
  flex-basis: 25%;
}
.blue {
  flex-basis: 50%;
}

Reference