Skip to main content

Flexbox

Flexbox source A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

圖片解說

從上方圖片可以看到 主軸 (main axis) 以及 交錯軸 (cross axis) 兩條軸線, 當我們在使用 flex 的時候 flex item 會根據 主軸 (main axis) 依序排版, 也就是 flex item 會以 由左到右 的方式進行排版動作, 不過要注意的是 主軸 (main axis) 與 交錯軸 (cross axis) 可以透過 flex-direction 屬性來調整。

除此之外,使用 flex 之後內部的元素都會根據視窗大小來調整寬度, 只要當視窗大小不夠顯示內部元素時,它就會自動將元素寬度縮小; 當視窗大小夠顯示內部元素時,它就會自動將元素寬度擴大, 不過也可以透過 flex-shrinkflex-grow 等屬性進行調整。

屬性說明

display

flexinline-flex

要使用 Flexbox 來進行排版的話,需要先將外部容器的 display 設置為 flexinline-flex。 兩者的差異為外部容器是否會占滿整個寬度,就如同 blockinline-block 之間的關係。

.flex {
display: flex;
}

flex-direction

rowrow-reversecolumncolumn-reverse

若是要將 主軸 (main axis) 調整為 垂直方向,也就是會 由上到下 的方式進行排版, 就可以透過 flex-direction 來調整。

.flex-row {
flex-direction: row; /* default */
}

.flex-col {
flex-direction: column;
}
tip

可以發現在 flex-direction 屬性中還具有 row-reversecolumn-reverse, 從字面上的意思可以得知它會變成 reverse 的,也就是 row 原本是 由左到右 就會變成 由右到左column 原本是 由上到下 就會變成 由下到上

caution

要注意一但變更了 flex-direction 它的 主軸交錯軸 也會跟著進行交換, 因此在使用 justify-contentalign-items 要小心當下的方向是 row 還是 column

flex-wrap

nowrapwrapwrap-reverse

當內部元素的數量多到 flex 容器沒辦法容納的時候,多餘的元素就可能會超出容器範圍, 這時候我們就能使用 flex-wrap 屬性,將內部元素進行換行。

.flex-wrap {
flex-wrap: wrap;
}

justify-content

flex-startcenterflex-endspace-betweenspace-aroundspace-evenly

要對內部元素進行排版時會使用到 justify-content 屬性,它會使內部元素沿著主軸進行對齊, 像是如果要置中的話就使用 center

  • space-between 第一項、最後項會貼齊外部容器、剩下空間平均分配
  • space-around 第一項、最後項會與外部間隔一段距離(距離為中間間隔的一半)、剩下空間平均分配
  • space-evenly 所有間隔有一樣的大小(與外部容器也是一樣)
.jc-center {
justify-content: center;
}

align-items

stretchcenterflex-startflex-endbaseline

align-items 也是在用 flex 排版是會去操作的屬性,它則是會讓內部元素沿著交錯軸進行排序。 而在預設的情況下為 stretch 也就是它會延展內部元素的寬或高 ( 要看當下的 flex-direction 是什麼 )。

.ai-center {
align-items: center;
}

align-content

stretchcenterflex-startflex-endbaseline

align-items 相似,但是 align-content 是對每一列沿著交錯軸進行排序的。

.ac-end {
align-content: flex-end;
}

align-self

stretchcenterflex-startflex-endbaseline

align-self 則是對於單個內部元素沿著交錯軸進行排版,因此在使用該屬性的時候是要設置在內部元素上, 而不是外部容器上。

.as-center {
align-self: center;
}

order

order 是用來調整內部元素的順序,可以為正數或負數,數字小的在前方,由於它也屬於調整單個元素的屬性, 因此也是要設置在內部元素上。

.first: {
order: -1;
}

flex-grow

<number>

它會決定要怎麼去分配外部容器所剩餘的空間,簡單來說它會依照 (每個元素的 flex-grow / 全部元素的 flex-grow 總和) * 剩餘空間 來計算該元素要分配到多少空間, 要注意當 flex-grow 介於 0 跟 1 之間的話,它並不會分配完所有的剩餘空間。

.grow-1 {
flex-grow: 1;
}

flex-shrink

<number>

當容器空間有限的時候,會透過 flex-shrink 去分配縮小的比例至每個元素, 會依照 (每個元素的 flex-shrink / 全部元素的 flex-shrink 總和) * (元素寬或高) 進行計算。

.shrink-1 {
flex-shrink: 1;
}

flex-basis

auto<number>

它是用來決定內部元素的初始寬或高,是根據當下 flex-direction 的方向是什麼。

.fb-200 {
flex-basis: 200px;
}

flex

flex-grow | flex-shrink | flex-basis

可以透過 flex 屬性來同時對 flex-growflex-shrinkflex-basis 進行設置,

  • initial flex: 0 1 auto 會根據空間自動縮短
  • auto flex: 1 1 auto 會根據空間自動縮短、伸長
  • none flex: 0 0 auto 不會根據空間自動縮短、伸長

當只有一個值時,它會對 flex-growflex-basis 進行設置,flex-shrink 則為 1, 它會根據有無單位來判斷是 flex-grow 還是 flex-basis

當同時給予兩個值時,第一個值是設置 flex-grow, 第二個值則會根據有無單位來決定是 flex-shrink 還是 flex-basis

.flex-1 {
flex: 1; // flex: 1 1 0;
}

範例

下方是我使用 codepen 寫的一個小小的範例,裡面有使用到上方提到的每個屬性。

Imgur Flexbox

參考文章