CSS3 之 flex

• Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。
• 任何一個容器均可以指定爲 Flex 佈局：display: flex; 行內元素： display: inline-flex;
• Webkit 內核的瀏覽器，必須加上 -webkit- 前綴。
• ie10+ 才支持彈性佈局（display: -ms-flex;）。
• 注意，設爲 Flex 佈局之後，子元素的 float、clear 和 vertical-align 屬性將失效。

容器的屬性

如下6個屬性設置在容器上。

• flex-direction 屬性決定主軸的方向（即項目的排列方向）。

  • row
  • row-reverse
  • column
  • column-reverse

• flex-wrap 若是一條軸線排不下，如何換行。

  • nowrap
  • wrap
  • wrap-reverse

• flex-flow flex-direction 屬性和 flex-wrap 屬性的簡寫形式

  • flex-flow: row nowrap; 默認值

• justify-content 定義了項目在主軸上的對齊方式。

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

• align-items 定義項目在交叉軸上如何對齊。（在方向爲row時，各 item 的高度不一樣，設置如何對齊。column時同寬度狀況亦同。）

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

• align-content 定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

項目的屬性

如下6個屬性設置在項目上。

• order 定義項目的排列順序。數值越小，排列越靠前，默認爲0。若是是reserve的順序，則數值越小，排列越靠後。
• flex-grow 定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。若是全部項目設置flex-grow: 1;，則它們將等分剩餘空間（若是有的話）。若是其中一個項目設置flex-grow: 2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。全部項目設置flex: 1;即等分剩餘空間。
• flex-shrink 定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。負值對該屬性無效。
• flex-basis 定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。
• flex flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。
• align-self 容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。