前言：
之前曾經在下面這篇有提到 CSS display 的一些用法，但那時候忽略了 Flex
Responsive Web Design (RWD) 響應式網站開發教學與心得
因為覺得有點麻煩，而且有些舊瀏覽器不太支援
但是最近才知道原來他好用的跟什麼一樣，所以這篇就來記錄學習的心得與練習一些範例
而且因為RWD的興起讓 Flexbox 排版方式好像已經慢慢變成趨勢了，因為他在排版使用上彈性比較大
所以應該是要好好了解一下才對~
但還是要先來看看各瀏覽器的支援程度，以防學了結果瀏覽器很多都沒支援
IE一向都是進步的反指標，IE 10 已經有支援了而IE 9也越來越少了，所以應該可以開始學了
但是在 IE 上面使用還是要注意一下可能會有存在一些 bug
而且 IE 僅支援 2012 版本的語法，使用前最好要先查一下
https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/
這篇也有目錄
一、Flex Container：
二、Flex Item：
三、自己的練習：
開始進入學習 Flexbox 的心得
Flexbox 中文意思就是可伸縮靈活的盒子，所以它用途就是讓容器內的子項目能夠靈活改變寬、高、大小、排序...等
他跟一般的 CSS版面設計不太一樣，他最初被推出來是用來解決傳統 CSS 比較沒辦法輕易達到的效果
像是 div 垂直置中，之前可能要使用 display: table + display:table-cell
但使用 Flex layout 就只要一行就寫完了
Flex 也跟一般的 CSS 不太一樣，他有他自己專屬的屬性，而在結構上他分為兩個部分
Flex Container：flex 容器
Flex Item ：flex 子項目
關於結構也可以參考一下下圖，圖來自 MDN ，W3C 也有圖，但是我覺得 MDN 得比較清楚
橘色是設定為 flex 的容器，裡面有三個藍色的 flex item
main axis：
main axis 是 flex 容器的主軸，所有的 flex 項目 都依照 main axis 而排列
但 main axis 會依照 flex-direction 的屬性設定來決定該怎麼排列，所以他不一定是橫的
main start、main end：
main start、main end 指的是 main axis這個主軸的起始跟結束位置
cross axis：
是一個垂直交叉於 main axis 的主軸，他的方向也會因為 flex-direction 而改變
cross start、cross end：
cross start、cross end 指的是 cross axis 這個軸的起始與結束位置
main size：
指的是 flex 子項目裡的寬或高，方向也是依照 flex-direction 屬性而改變
cross size：
指的是 flex 子項目裡的寬或高，方向也是依照 flex-direction 屬性而改變
看完了結構再來就是了解最重要的該如何使用
Flexbox layout 可用的屬性們
剛剛提到flexbox layout 分成兩個部分 flex container、flex item
所以下面用 flex container 跟 flex item 來各別列出可用的屬性
Flex Container
- display
用法：
#container {
display: flex | inline-flex ;
}
說明：
用來將容器定義為 flex container，flex 就等同於 block
block 跟 inline 的差異請看之前寫的這篇 7. 關於 CSS 的 display
- flex-direction
用法：
#container {
flex-direction: row | row-reverse | column | column-reverse;
}
說明：
上面提到 flex item 會跟著 flex 的 main axis 依序排列
而main axis 則會跟著 flex-direction 的屬性設定來決定方向
row：由左到右
row-reverse : 由右到左
column : 由上到下
column-reverse : 由下到上
可以參考一下這個範例來看看效果 : (自行切換Result、CSS、HTML 頁簽)
- flex-wrap
用法：
#container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
說明：
flex-wap 主要用來定義 flex container 裡面是單行顯示還是多行顯示，預設是 nowrap 不換行
nowrap：不換行
wrap：換行
wrap-reverse：換行但方向相反
以下是w3c的範例圖
demo：
- flex-flow：
用法：
#container{
flex-flow: <'flex-direction'> || <'flex-wrap'>
}
說明：
flex-flow 是 flex-direction 跟 flex-wrap 的混合體，可以一次決定兩個屬性，像下面這樣使用
flex-flow: row-reverse wrap; 或 flex-flow: row nowrap;
感覺就像是 border-width:1px; + border-style:solid; + border-color:#cccccc;
等於 border: 1px solid #cccccc; 一樣的感覺
- justify-content：
用法：
#container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
說明：
再看一下這張結構圖：
justify-content 可以用來決定 flex item 對齊的方式
上面有提到 flex item 的排列方向是由 flex-direction 來決定，而對齊的方式就是由 justify-content 來決定
flex-start：flex item 往 main start 的方向對齊
flex-end：flex item 往main end 的方向對齊
center：flex item 在 cross start 軸上置中對齊
space-between：flex item 平均分配在 main axis 軸上，但第一個 flex item 位於 main start，最後一個位於 main end
space-around：flex item 平均分配在 main axis 軸上，但兩端保留一半的空間
可以看看下面的效果
- align-items：
用法：
#container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
說明：
align-items 跟 justify-content 剛好相反，align-items 是設定垂直的對齊方式
flex-start：flex item 往 cross start 的方向對齊
flex-end：flex item 往 cross end 的方向對齊
center：垂直置中
baseline：flex item 會依照各個 item 的基準線對齊
stretch：將所有元素撐開至填滿 flex container
- align-content
用法：
#container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
說明：
align-content 的對齊方式有點像 justify-content 的分散 + align-items 的垂直對齊的綜合
但他對齊的基準線是 cross axis，而且如果只有一行是沒有效果的
必須 main axis 軸上有換行的元素才有效果
flex-start：所有內容會靠往 cross-start 對齊
flex-end：所有內容會靠往 cross-end 對齊
center：會在 cross axis 上置中所有內容
space-between：將空白平均分配到每行內容之間，第一行靠在 cross-start，最後一行靠在 cross-end
space-around：平均分配空白到每行內容之間
stretch：自動將多餘的空間補滿 (預設)
以上就是 flex container 的屬性
再來看看子項目 flex item 可以操作的屬性有哪些
Flex Item
- order：
用法：
.item {
order: <integer>;
}
說明：
這個屬性真的很神奇又方便，他可以決定 flex item 在 flex container 中排列的順序
數字由大到小排序，如果沒設定的話就是 0
直接來看用法比較有 fu
- flex-grow：
用法：
.item {
flex-grow: <number>; /* 預設 0 */
}
說明：
設定了這個屬性就會讓 flex item 在 flex container 中按照比例來填滿剩餘的空間
既然是要填滿剩餘的空間，那當然 flex item 不能一開始就把 flex container 塞爆
一樣來看看實際用法比較有 fu
- flex-shrink：
用法：
.item {
flex-shrink: <number>; /* 預設 1 */
}
說明：
flex-shrink 跟 flex-grow 剛好相反，flex-shrink 用途是在當 flex item 把 flex container 擠爆了
flex-shrink 就會把 flex item 們縮小成設定的比例，它會根據 flex-shrink 的值來決定縮小的倍數
設定為0的時候就不會改變 (不可以為負)
- flex-basis
用法：
.item {
flex-basis: <length> | auto; /* default auto */
}
說明：
這個屬性會依照 flex item 定義的最小寬度或高度
當需要伸縮的時候就會依照 flex-grow or flex-shrink 來伸縮，有點類似 min-width
基本上要跟 flex-grow、flex-shrink 一起合用，預設是 0 會只使用 flex-grow 來縮放
如果設為 auto，就表示子元素以自己的基本大小為單位
下面是只使用 flex-basis 的情況，感覺跟 min-width 差不多
- flex
用法：
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
說明：
flex 是 flex-grow、flex-shrink、flex-basis 三個屬性所組成
就有點像 border:1px solid #cccccc; 是由 border-width、border-style、border-color 所組成一樣
如果 flex 只填了一個值 (無單位)，那預設就是以 flex-grow 的方式呈現
第二、三個參數 (flex-shrink 和 flex-basis) 可不給，預設值為 0 1 auto
建議都用這個屬性來設定，不要用上面的 flex-grow、flex-shrink、flex-basis 分開設定
這個我沒有寫範例來練習 = = 但是在 jsfiddle 看到一個高手寫的可以參考一下
http://jsfiddle.net/teddyrised/wP5UP/2/ (點進去操作拖拉卷軸會比較有感覺)
- align-self
用法：
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
說明：
align-self 可以讓你為單獨的子元素設置 align-items 行為，會覆蓋父元素 align-items
auto：預設值，元素繼承了父容器的 align-items 屬性，如果沒有父容器則為 stretch
flex-start：內容 往 cross start 的方向對齊
flex-end：內容 往 cross end 的方向對齊
center：內容垂直置中
baseline：會依照各個 item 的基準線對齊
stretch：將所有元素撐開至填滿 flex item
下面的範例父元素使用了 align-items:center; 告訴 flex items 要垂直置中對齊
但第二個 flex item 使用了 align-self 覆寫了覆元素的 align-items:center; 為 align-self:flex-end;
結束了，屬性就以上這些，safari 要記得加前置詞 -webkit-
參考資料如下：
下面這網站除了介紹外還有一些練習很實用~~
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
下面這個網站有範例可以參考很不錯
http://fight-ikea.logdown.com/posts/231608-css-flexbox
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
W3C：https://www.w3.org/TR/css-flexbox-1/
自己的練習：
傳統使用 inline 做成的 horizontal menu
使用 flexbox layout 做的 horizontal menu
留言列表
CSS、Responsive Web Design (2)