CSS3-flex佈局

內容：

設置彈性容器：display:flex/inline-flex;，它的所有子元素自動成爲彈性子元素

• 彈性容器外 彈性子元素內正常渲染。（彈性盒子只定義了彈性子元素如何在彈性容器內佈局）
• 通常情況下默認每個容器只有一行，彈性子元素在彈性盒內一行顯示。
• 設置flex佈局以後，子元素的float 、 clear 、 vertical-align屬性將失效。
  
  容器存在兩個軸：水平的主軸 和 垂直的交叉軸。
  

  ---

彈性容器屬性：

改變彈性子元素的排列方式，在彈性容器中設置：direction:rtl;
【1】flex-direction: 改變彈性子元素在父容器中的位置

flex-direction: row | row-reverse | column | column-reverse
              橫向ltr   反轉橫向       縱向       反轉縱向
              //下圖按此方式顯示：

【2】flex-wrap: 改變彈性子元素的換行方式

flex-wrap: nowrap |wrap| wrap-reverse

• nowrap 默認， 彈性容器爲單行。該情況下彈性子項可能會溢出容器。
• wrap 彈性容器爲多行。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
• wrap-reverse 反轉 wrap 排列。

【3】flex-flow:（flex-direction屬性和flex-wrap屬性的簡寫形式。）

flex-flow: row wrap;  //橫向排列 多行排列

【4】justify-content: 彈性子元素內容對齊

justify-content: flex-start | flex-end | center | space-between | space-around
                  左對齊        右對齊     居中       兩端對齊      兩側間隔相等爲項目間隔的一半

【5】align-items 彈性子元素在交叉軸上如何對齊

   align-items: flex-start | flex-end | center    | baseline               | stretch;
// 分別沿交叉軸的  起點對齊     終點對齊  中點對齊    子元素的第一行文字基線
//stretch（默認值）：如果項目未設置高度或設爲auto，將佔滿整個容器的高度。

【6】align-content： 定義多根軸線的對齊方式
這個屬性只有在容器有多條主軸是纔有效，一條主軸無效
類似於justify-content屬性

justify-content: flex-start | flex-end   |    center   |space-between| space-around | stretch
             與交叉軸起點對齊|交叉軸終點對齊|交叉軸中間對齊|交叉軸兩端對齊|交叉軸兩側間距相等|默認值

---

彈性子元素屬性：

【1】order：彈性子元素的排列順序。數值越小，排列越靠前（可以爲負）。

【2】flex-grow：定義彈性子元素的放大比例，默認爲0，(就是如果沒有佔滿容器整行，不放大項目。)

【3】flex-shrink：定義彈性子元素的縮小比例，默認爲1，(如果空間不足，該彈性子元素將縮小。)

【4】flex-basis: 在分配多餘的空間之前，彈性子元素佔據的主軸空間，默認爲auto，就是彈性子元素本來的寬度 (eg：直接可以寫成 flex-basis:200px;)

【5】flex: flex是flex-grow、flex-shrink、flex-basis的複合屬性
默認值：0 1 auto，後兩個屬性可選
可以寫關鍵字：auto (1 1 auto) 和 none (0 0 auto)

【6】align-self: 允許單個彈性子元素有與其他彈性子元素不一樣的對齊方式，可以覆蓋align-items屬性。默認爲auto。

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

• margin:auto;使得彈性子元素在兩軸方向上完全居中