flexbox 詳細教程

caniuse

flexbox 神器確定是前端必會的。對於各類佈局只要學會 flexbox 那都是 so easy 的事情。要用 flexbox，最早就是看看 caniuse 上瀏覽器對 flexbox 的兼容性。下面是截圖：

圖片中 partial support 的左上角的數字

對應下面的意思。具體和訪問連接去看,:caniuse 上瀏覽器對 flexbox 的兼容性.

部分支持的意思是支持舊的規範或者舊的語法

1. 僅支持old flexbox規範和不支持 warp

2. 僅支持 2012 年的語法

3. 不支持 flex-wrap 和 flex-flow 屬性

4. 部分支持（partial support）是由於有大量的 bug。

已知的問題，詳情見連接的「known issues」:

1. IE11 要加 flex-basis 屬性。

2. 在 IE10 和 IE11, 若是外層元素有min-height可是沒有明確的 height 值，並且外層容器 (也就是父元
   素) 的display爲flex和flex-derection:column, 會致使不能正確計算他們子元素的大小。

3. 當父元素有min-height時，IE11 中子元素不能正確的垂直對齊。

4. IE 10 中, 設置-ms-flex-flow: row wrap 不會換行除非在子元素中設置 display: inline-block

5. firefox 的 button 元素不支持 flexbox

6. IE10:子元素 flex 屬性的默認值是 0 0 auto 而不是 1 0 auto

7. Safari, 子元素的百分比高度（不用 flex）不被識別。chrome 相似的 bug 在chrome 51已經修復。

flexbox 的屬性介紹：

官方解釋：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

http://codepen.io/justd/pen/yydezN (flexbox 各屬性 demo，下面只是 demo 的說明。demo 看不懂的時候能夠看下面的說明)

父元素 (flex container) 相關屬性：

1. flex-direction（指定元素的方向）:

row :子元素按行排列（默認從 main start 開始排）
row-reverse :子元素按行排列並反方向（從 main end 開始排）
column :子元素縱列排（從 cross start 開始排）
column-reverse 從 cross end 開始排

2. flex-wrap(指定元素換行):

nowrap：不換行
wrap:換行
wrap-reverse:換行

3. justify-content(子元素橫着對齊方式:看這個效果 flex-wrap 設置爲 wrap):

flex-start：flex container 開始的地方
flex-end: flex container 結束的地方
center:靠中間
space-between:向兩邊
space-around:子元素周圍用間隙環繞

4. align-items：（子元素豎着對齊方式）

stretch：拉伸佔滿整列
flex-start：頂部對齊
flex-end：底部對齊
center：靠中間
baseline：這個的理解看 vertical-align: baseline;

5.align-content 是 justify-content 和 align-items 的綜合版 (在縱軸和橫軸都實現)：

stretch:橫向拉伸，縱向也拉伸
... 其它相似

子元素 (flex item) 相關屬性:

1. order:

定義子元素的排列順序:從小數開始排，默認爲 0

2. flex-grow:

定義子元素的放大比例, 相對其它兄弟元素設置的值爲基準, 默認爲 0

3. flex-shrink：

定義子元素的縮小比例, 默認爲 1

4. flex-basis：

定義元素在未分配大小前所佔的大小，默認 auto

5. align-self：

容許單個自元素的對齊方式。可與其它子元素不一樣。區別於父元素定義的對所有子元素起做用。默認值爲 auto，表示繼承父元素的 align-items 屬性，若是沒有父元素，則等同於 stretch。屬性值含義參考父元素

6. flex:

flex-grow, flex-shrink 和 flex-basis 的簡寫，默認值爲 0 1 auto。後兩個屬性可選。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

基於我的的理解，但願指正。