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-shrink
、flex-grow
等屬性進行調整。
屬性說明
display
flex
、inline-flex
要使用 Flexbox 來進行排版的話,需要先將外部容器的 display 設置為 flex
或 inline-flex
。
兩者的差異為外部容器是否會占滿整個寬度,就如同 block
及 inline-block
之間的關係。
.flex {
display: flex;
}
flex-direction
row
、row-reverse
、column
、column-reverse
若是要將 主軸 (main axis) 調整為 垂直方向,也就是會 由上到下 的方式進行排版,
就可以透過 flex-direction
來調整。
.flex-row {
flex-direction: row; /* default */
}
.flex-col {
flex-direction: column;
}
可以發現在 flex-direction
屬性中還具有 row-reverse
、column-reverse
,
從字面上的意思可以得知它會變成 reverse 的,也就是 row
原本是 由左到右 就會變成 由右到左 ;
column
原本是 由上到下 就會變成 由下到上。
要注意一但變更了 flex-direction
它的 主軸 及 交錯軸 也會跟著進行交換,
因此在使用 justify-content
、align-items
要小心當下的方向是 row
還是 column
。
flex-wrap
nowrap
、wrap
、wrap-reverse
當內部元素的數量多到 flex 容器沒辦法容納的時候,多餘的元素就可能會超出容器範圍,
這時候我們就能使用 flex-wrap
屬性,將內部元素進行換行。
.flex-wrap {
flex-wrap: wrap;
}
justify-content
flex-start
、center
、flex-end
、space-between
、space-around
、space-evenly
要對內部元素進行排版時會使用到 justify-content
屬性,它會使內部元素沿著主軸進行對齊,
像是如果要置中的話就使用 center
。
space-between
第一項、最後項會貼齊外部容器、剩下空間平均分配space-around
第一項、最後項會與外部間隔一段距離(距離為中間間隔的一半)、剩下空間平均分配space-evenly
所有間隔有一樣的大小(與外部容器也是一樣)
.jc-center {
justify-content: center;
}
align-items
stretch
、center
、flex-start
、flex-end
、baseline
align-items
也是在用 flex 排版是會去操作的屬性,它則是會讓內部元素沿著交錯軸進行排序。
而在預設的情況下為 stretch
也就是它會延展內部元素的寬或高 ( 要看當下的 flex-direction
是什麼 )。
.ai-center {
align-items: center;
}
align-content
stretch
、center
、flex-start
、flex-end
、baseline
與 align-items
相似,但是 align-content
是對每一列沿著交錯軸進行排序的。
.ac-end {
align-content: flex-end;
}
align-self
stretch
、center
、flex-start
、flex-end
、baseline
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-grow
、flex-shrink
、flex-basis
進行設置,
initial
flex: 0 1 auto
會根據空間自動縮短auto
flex: 1 1 auto
會根據空間自動縮短、伸長none
flex: 0 0 auto
不會根據空間自動縮短、伸長
當只有一個值時,它會對 flex-grow
或 flex-basis
進行設置,flex-shrink
則為 1,
它會根據有無單位來判斷是 flex-grow
還是 flex-basis
。
當同時給予兩個值時,第一個值是設置 flex-grow
,
第二個值則會根據有無單位來決定是 flex-shrink
還是 flex-basis
。
.flex-1 {
flex: 1; // flex: 1 1 0;
}
範例
下方是我使用 codepen 寫的一個小小的範例,裡面有使用到上方提到的每個屬性。