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