[CSS] Flexible Box 彈性排版

隨著各家瀏覽器支援的功能越來越多，
過去常用的 display + position + float 雖然能解決大部分的排版方式，
但總還是讓人覺得不夠用，
例如要讓物件在 rwd 時能完美填滿，
或者要讓某個物件垂直置中，
又或者當我們要在一連串相同的排版中對特定物件作一些排列時，
時常讓人弄得很抓狂阿！
今天就讓安森煮煮來教各位這個好用的朋友吧！

Flexible Box 對於各家瀏覽器的對應支援版本：

資料來源:http://caniuse.com

Flexbox 可以對任何的物件使用，
但是要注意，
若是父物件被定義為  Flexbox，
那其下子物件的 float、clear 以及 vertical-align 都將會失效，
另外, Flexbox 比較常應用在 一維 的排版上，
通常針對 二維 的排版安森煮煮就會比較推薦使用 網格排版(Grid Layout)。

下面讓我們來認識一下 Flexbox 個名詞的示意圖：

容器(父元素)

容器本身有兩種定義方式：
1. flex
2. inline-flex

與常用的 block 意義相同 inline 用來決定後方的元素是否強制換行。

EX:
display: -webkit-flex; /* Safari */display: flex;
display: -webkit-inline-flex; /* Safari */display: inline-flex;

Flexbox 的容器(父元素)主要有以下六種屬性：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

接下來讓我們來一一介紹

flex-direction

主要在於決定項目在主軸(main axis)的排列方向。

flex-direction: row | row-reverse | column | column-reverse;

其中：
row : 預設值, 水平主軸，排列方向為由左至右
row-reverse : 水平主軸，排列方向為由右至左
column : 垂直主軸，排列方向為由上至下
column-reverse : 垂直主軸，排列方向為由下至上

EX:
-webkit-flex-direction: row; /* Safari */
flex-direction: row;

 

flex-wrap

主要在於決定當項目排不下的時候，該如何換行。

flex-wrap: nowrap | wrap | wrap-reverse;

其中：
nowrap : 預設值，不換行
wrap : 換行，向下排列
wrap-reverse : 換行，向上排列

EX:
-webkit-flex-wrap: nowrap; /* Safari */
flex-wrap: nowrap;

flex-flow

flex-direction 與 flex-wrap 的簡寫。

flex-flow:  flex-direction | flex-wrap;

其中:
預設值為 row nowrap

EX:
-webkit-flex-flow: row nowrap; /* Safari */
flex-flow: row nowrap;

justify-content

主要為控制項目在主軸(main axis)上的對齊方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

其中(假設為 水平 主軸)：
flex-start : 向 主軸起點(main start) 對齊，也就是靠左對齊
flex-end : 向 主軸終點(main end) 對齊，也就是靠又對齊
center : 置中
space-between : 以項目之間的間距都相等的方式對齊
space-around : 以每個項目本身的兩側間距相等的方式對齊

EX:
-webkit-justify-content: flex-start; /* Safari */
justify-content: flex-start;

align-items

決定項目在交叉軸(cross axis)的對齊方式。

align-items: flex-start | flex-end | center | baseline | stretch;

其中(假設為 垂直 交叉軸)：
flex-start : 向 交叉軸起點(cross start) 對齊，也就是靠上對齊
flex-end : 向 交叉軸終點(cross start) 對齊，也就是靠下對齊
center : 項目的中心點向交叉軸中心點對齊
baseline : 以項目內的第一行文字的底線對齊
stretch : 預設值，如果項目沒有定義高度或定義為 auto 時，項目的高度將會填滿整個 Flexbox 的高度

EX:
-webkit-align-items: stretch; /* Safari */
align-items: stretch;

align-content

主要在於決定多個交叉軸(cross axis)時的對齊方式，
如果項目只有一行(也就是只有一個交叉軸)，
此屬性將會失效。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

其中：
flex-start : 全部向交叉軸起點(cross start) 對齊，也就是靠上排列
flex-end : 全部向交叉軸起點(cross start) 對齊，也就是靠下排列
center : 全部向交叉軸起點(cross start) 對齊，也就是置中排列
space-between : 以每行項目之間的間距都相等的方式向交叉軸對齊
space-around : 以每行項目本身的上下間距相等的方式向交叉軸對齊
stretch : 預設值，放大每行項目的高度到佔滿整個交叉軸

EX:
-webkit-align-content: stretch; /* Safari */
align-content: stretch;

項目(子元素)

Flexbox 的項目(子元素)有六種屬性：

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

各屬性的介紹如下

order

決定項目的排列順序，對於有 全局屬性(Global attributes) 的標籤可能會失效(例如：nav)，數字排列由小到大。

order: [integer];

預設值為 0，無單位

EX:
-webkit-order: 0; /* Safari */
order: 0;

flex-grow

定義項目在排版後還有剩餘空間時該如何放大的比例分配。

flex-grow: [number];

預設值為 0，無單位，數值不可為負值，數值為 0 時不放大

EX:
-webkit-flex-grow: 0; /* Safari */
flex-grow: 0;

flex-shrink

定義項目在排版當中剩餘空間不足時該如何縮小項目的比例。

flex-shrink: [number];

預設值為 1，無單位，數值不可為負值，數值為 0 時不縮小

EX:
-webkit-flex-shrink: 0; /* Safari */
flex-shrink: 0;

flex-basis

定義項目初始化的的主軸空間(main size)，也就是項目的寬度。

flex-basis: auto | [width];

預設值為 auto，瀏覽器計算此屬性來計算主軸(main axis)的剩餘空間

EX:
-webkit-flex-basis: auto; /* Safari */
flex-basis: auto;

flex

flex-grow、flex-shrink 與  flex-basis 的簡寫。

flex: none | auto | [flex-grow] [flex-shrink] ? || [flex-basis];

預設值為 0 1 auto，W3C建議在定義項目屬性時優先使用此屬性，因為瀏覽器會根據此屬性計算排版相關值，以及使程式能正確初始化相關數值

EX:
-webkit-flex: auto; /* Safari */
flex: auto; 

align-self

定義特定項目可以有與其他項目不一樣的對齊方式，類似 align-items，但 align-items 主要是針對容器，此屬性主要是針對項目，就像繼承的概念，可以覆寫 align-items 的屬性。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

容器有定義時預設值為 auto，容器沒有定義時預設值為 stretch

EX:
-webkit-align-self: auto; /* Safari */
align-self: auto; 

[點我參考範例]