在早期得知 CSS 制定新的排版屬性 flex 時,因為瀏覽器支援度的不一致 (其實就是 IE !?),所以沒有使用,畢竟對前端工作者來說,雖然新技術需要不斷精進,但與其為了使用新技術而寫超多 hack 來補,還是選擇最通用保險的方式比較不會出錯,也較好維護,隨著時間過去 flex 的支援度趨於穩定,所以決定開始在專案中使用它來排版,寫一篇筆記來記錄相關用法,方便查詢。
flexbox 模型
flexbox 指的是一種彈性靈活的盒子模型概念 (flexible box),它的佈局方式讓位於盒子中的物件排版變得更加強大,在一個 flexbox 中,它擁有幾項特性,包含了水平軸向的起終點、垂直軸向的起終點、盒子模型整體的 X Y 軸概念 (可取得模型中心點),以及基本盒子模性的寬高尺寸等等。
flexbox 盒子模型支援的屬性有以下幾種:
- display
顯示何種 flex 模式。
– - flex-direction
元素的排列方向。
– - justify-content
元素在盒子中的水平對齊。
– - align-items
元素在盒子中的垂直對齊。
– - align-self
針對特定子元素
– - flex-wrap
元素是否換行。
– - align-content
針對多行元素的對齊調整。
– - order
將元素編號,以進行排列。
– - flex
複合屬性,由 flex-grow、flex-shrink、flex-basis 組成。
–
display
要將元素轉換成 flex 模型首先必須使用 display 屬性,flex 支援的 display 屬性值有 2 種:
- flex
為 flex 模型的預設值,將 display 設定為 flex 後容器內容裡的元素就可以依照相關 flex 屬性做出變化。
– - inline-flex
與 inline-block 的特性類似,將 flex 模型再包覆上 inline 的特性。
–
#flexbox { display: flex; display: inline-flex; }
flex-direction
flex-direction 屬性決定了 flexbox 中元素的排列方向,它的屬性值有 4 種:
- row
預設值,元素由左至右排列。
– - row-reverse
同 row 值排列方式,但反轉。
– - column
元素由上至下排列。
– - column-reverse
同 column 值排列方式,但反轉。
–
#flexbox { flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; }
justify-content
justify-content 屬性負責元素在容器中的 “水平對齊” 位置,對照模型圖,它的屬性值有 5 種:
- flex-start
元素對齊模型水平 start 的位置,靠左對齊。
– - flex-end
元素對齊模型水平 end 的位置,靠右對齊。
– - center
元素置中對期。
– - space-between
元素依容器寬度平均分配位置,其中最左及最右的元素會貼齊 start、end。
– - space-around
元素依容器寬度平均分配位置及間距,像是使用 float 加上 margin 左右給予相同數值的效果。
–
#flexbox { justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-between; justify-content: space-around; }
align-items
align-items 屬性負責元素在容器中的 “垂直對齊” 位置,對照模型圖,它的屬性值有 5 種:
- flex-start
元素對齊模型垂直 start 的位置,靠上對齊。
– - flex-end
元素對齊模型垂直 end 的位置,靠下對齊。
– - center
元素垂直置中對齊。
– - stretch
預設值。
– - baseline
依各元素 baseline 排列。
–
#flexbox { align-items: flex-start; align-items: flex-end; align-items: center; align-items: stretch; align-items: baseline; }
align-self
align-seft 的屬性值和 align-items 完全一樣,不同之處在於這個屬性可以針對指定元素去做特別動作,假設容器中的元素已經統一 flex-start 對齊,但要為其中某個元素設定 flex-end 對齊時可以這樣做:
#flexbox .box2 { align-self: flex-end; }
flex-wrap
在 flex 中的元素如未特別設定,都是以 “單行” 來排列,假使元素各自的寬度以 “固定單位 px” 約束,當 flexbox 容器壓縮到元素範圍時,block 容器會迫使超出容器範圍的元素斷行往下掉,但 flex 容器會自動將元素的寬度換算成 “比例” 彈性撐滿,這樣的特性在響應式網頁盛行的時代是一大優點,不用特別去設定就滿足 RWD 的條件了。
承上如果要讓 flexbox 的元素可以多行排列,就要使用 flex-wrap 屬性,它的屬性值有 3 種:
- nowrap
預設值,單行顯示。
– - wrap
多行顯示。
– - wrap-reverse
多行但容器內元素反轉。
–
#flexbox { flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; }
align-content
align-items 針對單行元素的垂直排列做調整,如果是多行的元素,行與行間的垂直對齊就要依靠 align-content,它有 6 個屬性值:
- flex-start
元素對齊模型垂直 start 的位置,靠上對齊。
– - flex-end
元素對齊模型垂直 end 的位置,靠下對齊。
– - center
垂直置中。
– - space-between
元素行依容器高度平均分配位置,其中最上及最下的行會貼齊垂直 start、end。
– - space-around
元素行依容器高度平均分配位置及間距,像是使用了 margin 上下給予相同數值的效果。
– - stretch
元素平均撐高將容器填滿。
–
#flexbox { align-content: flex-start; align-content: flex-end; align-content: center; align-content: space-between; align-content: space-around; align-content: stretch; }
order
order 屬性可以為 flexbox 中的元素設定編號,使容器中的元素打破 DOM 在 HTML 中的排列規則,依照設定序號來排序,例如:
#flexbox .box1 { order: 3; } #flexbox .box2 { order: 1; } #flexbox .box3 { order: 2; }
設定了編號之後看到的顯示順序會依照 order 排列變成 box2 → box3 → box1。
flex
flex 為複合的屬性,它由 3 個屬性組合而成,依序為 flex-grow、flex-shrink、flex-basis,如果只填寫一個數值,則代表的是 flex-grow。
- flex-grow
當所有元素總寬度小於父容器寬度時,元素是否依照比例來填滿父容器,這個比例指的是擴張的比例,預設值為 0 不變化,可任意設定比例數值來調整變化,數值越大,元素的寬度越寬。
– - flex-shrink
當所有元素總寬度大於父容器寬度時,元素是否依照比例來壓縮填滿父容器,這個比例指的是壓縮的比例,預設值為 1 依照原始比例壓縮,設為 0 為不變化,壓縮比值越大元素寬度越窄。
– - flex-basis
元素的寬度,如果設定了這個數值,則它會取代 width 屬性,如果有設定數值,則優先權比 auto 高。
–
#flexbox .box1 { flex-grow: 1; flex-shrink: 3; flex-basis: 100px; } #flexbox .box2 { flex-grow: 0; flex-shrink: 1; flex-basis: 300px; } #flexbox .box3 { flex-grow: 1; flex-shrink: 2; flex-basis: 400px; }