一Flexible Box Layout：
??彈性赫模型布局：提供一種更加高效的方式來對 容器中的條目進行布局、對齊和分配空間
二、盒模型的概念
1、容器：采用flex 布局的元素都稱為容器 Flex Container
2、項目：容器內的所有子元素自動成為容器成員，稱為項目 ?Flex Item
3、兩根軸：
? ? ? 3-1、main axis（主軸）：
? ? ? ? ? ? ? 容器中水平的稱為主軸
? ? ? ? ? ? ? main start主軸的開始位置
? ? ? ? ? ? ? main end主軸的結束位置
? ? ? 3-2、cross axis（交叉軸）：
? ? ? ? ? ? ? 容器中垂直的稱為交叉軸。
? ? ? ? ? ? ? cross start交叉軸的開始位置。
? ? ? ? ? ? ? cross end交叉軸的結束位置。
4、項目默認按照主軸排列：
? ? ?4-1：main size單個項目占據的主軸空間
? ? ?4-2：cross size單個項目占據的交叉軸空間
三、使用
1、任何容器都可以指定為flex布局：
? ? ? ?1-1：.box { display: flex; }
? ? ? ?1-2：flex布局之后，子元素成為內聯塊元素
? ? ? ?1-3：注意：display: -webkit-flex;
2、行內元素也可以使用flex布局：.box section { display: inline-flex; }
3、注意設置后，float /clear / vertical-align將失效
四、容器的樣式
/*給容器標簽設置flex屬性，則該容器中項目的布局就會按照flex的方式布局*/
/*如果父標簽成了flex的容器，則子標簽會有內聯塊樣式的相關屬性；且子標簽所設置的float\clear\vertical-align屬性會失效*/
1、 ? flex-direction：決定主軸的方向（項目的排列方向）
? ? ? ? ?/*通過修改主軸的方向，進而修改項目的布局順序*/
? ? ? ? flex-derection: row | row-reverse | column | column-reverse;
? ? ? ? ?1-1值： ? ?row（默認值） ? 主軸為水平方向（左到右）
? ? ? ? ? ? ? ? ? ? ? ? ? row-recerse? ? ? 主軸為水平方向（右到左）
? ? ? ? ? ? ? ? ? ? ? ? ? column? ? ? ? ? 主軸為垂直方向（上到下）
? ? ? ? ? ? ? ? ? ? ? ? ?column-reverse ? ? ? ?主軸為垂直方向（下到上）
2、 flex-wrap：默認情況下，項目都排在一條線（軸線），如果一條軸線排不下，flex-wrap決定該如何換行。
指定項目是否換行? flex-wrap: nowrap | wrap| wrap-reverse
? ? ? ?1-1值： ? no-wrap（默認）不換行
? ? ? ? ? ? ? ? ? ? ? wrap ? 換行，第一行在上方
? ? ? ? ? ? ? ? ? ? ? ?wrap-reverse ?換行，第一行在下方
3、 flex-flow: flex-flow屬性是flex-direction屬 性和flex-wrap的簡寫形式
? ? ? ? 默認值如 flex-flow:wrap row
4、 justify-content：決定項目在主軸上的對齊方式（以下屬性默認從左向右為例）
? ? ? ? justify-content: flex-start | flex-end | center |space-between | space-around;? ? ? ? ?
? ? ? 1-1值： ? flex-start：研左側對齊
? ? ? ? ? ? ? ? ? ? ? flex-end：沿右側對齊
? ? ? ? ? ? ? ? ? ? ? center：沿中間對齊
? ? ? ? ? ? ? ? ? ? ? space-around：均勻分布（項目兩側留白相等）
? ? ? ? ? ? ? ? ? ? ? space-between：項目靠兩側對齊
5、align-items：決定項目沿交叉的對齊方式（以默認從上到下為例）。
? ? ? ? ? ?align-items:flex-start | center | flex-end | stretch | baseline
? ? ? ? 5-1值：? flex-start：沿上方對齊
? ? ? ? ? ? ? ? ? ? ?center：沿中間對齊
? ? ? ? ? ? ? ? ? ? ?flex-end：沿下方對齊
? ? ? ? ? ? ? ? ? ? ?baseline：沿文字基線對齊
? ? ? ? ? ? ? ? ? ? stretch：默認值 填滿整個交叉軸，將占滿整個容器的高度
6、 ?align-content：定義了多根軸線的對齊方式，如果項目只有一根軸線，該屬性不起作用。
? ? ? ?align-content: flex-start | flex-end | center | space-between | space-around | stretch：默認值
? ? ? ? 6-1值：flex-start：沿交叉軸起點對齊
? ? ? ? ? ? ? ? ? ? ?flex-end：沿交叉軸結束點對齊
? ? ? ? ? ? ? ? ? ? ?center：沿交叉軸中點對齊
? ? ? ? ? ? ? ? ? ? ?space-between：沿交叉軸兩側對齊
? ? ? ? ? ? ? ? ? ? ?space-around：沿交叉軸
? ? ? ? ? ? ? ? ? ? ?stretch (默認值)軸線占滿整個交叉軸
align-items和align-content的異同
相同點：都是設置項目在交叉軸方向上的對齊方式
不同點：
在只有單根軸線（項目不換行）時，使用align-items設置對齊方式
在有多跟軸線（項目換行）時，使用align-content把多跟交叉軸合并為一根，每一行上的項目都參照同一根交叉軸進行對齊。
如果在多跟軸線情況下使用align-items來設置交叉軸方向上的對齊方式，每一行的項目會參照自己這一行上的交叉軸進行對齊（效果：行與行之間有空隙）
五、項目的屬性
1、 flex-grow：[number] 定義項目的放大比例
? ? ? number: 數值 默認為0 不放大，值越大，放大比率越大
? ? ? 默認為0，即如果存在剩余空間，也不放大
? ? ? ?如果所有的flex-grow屬性都為1，則他們將等分剩余空間如果一個項目的flex-grow屬性為 ? ? ? ? ? ?2，其它項目都為1，則前者占據的剩余空間將?其它項多一倍
2、flex-shrink：[number] ?定義了項目的縮小比例
? ? ? ?number： 數值 默認1 自動縮小，值越大，縮小比率越大
? ? ? ?默認為1即如果空間不足，該項目將縮小
? ? ? ?如果所有的項目flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的 ? ? ? ? ?flexshrink屬性為0，則其它項目都為1，則空間不足時，前者不縮小。
? ? ? ? 負值對該屬性無效
3、flex-basis：定義了在分配多余空間之前，項目占據的主軸空間
? ? ? ? ? ? ? ? flex-basis: auto | pixel | 百分比
? ? ? ? ? ? ? 默認值為auto，即項目的本來大小
? ? ? ? ? ? ? ? auto ： 使用項目本身大小
? ? ? ? ? ? ? ? pixel ： 使用指定的像素值
? ? ? ? ? ? ? ? percent ： 使用指定的百分比
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?100% 當wrap 時，項目會占容器的整個寬度
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 當nowrap 時， 項目會占容器主軸剩余的寬度（無他放大無效）
4、flex flex: flex-grow ?| flex-shrink | flex-basis
? ? ? ?如：flex:1 1 100%
5、align-self：屬性允許單個項目有與其它項目不一樣的對齊方式，可覆蓋align-items屬性
? ? ? flex-start | center | flex-end | stretch | baseline 決定項目自身的對齊方式（相對于交叉軸）
? ? ? 默認值auto表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch
? ? ?該屬性有6個值，除了auto，其它都與align-items屬性完全一致
6、 order：定義項目的排列順序 數值越小，排列越靠前 默認為0
? ? ? ? ?order: [number] 決定項目的順序
