在早期得知 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;
}

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料