介紹：

flex布局，即是Flexible Box的縮寫，即是“彈性布局”或者“彈性盒模型”。

flex的指定：任何一個容器都可以指定為Flex布局

　　anyContainer{　　display:flex;　　　　}

行內元素也可以指定為flex布局：將display取值改為inline-flex，行內的彈性布局

Webkit內核的瀏覽器，必須加上前綴才行-webkit-flex；

註意的是：設為 Flex 布局以後，子元素的float、clear和vertical-align屬性將失效。

概念：

設為flex的容器，存在兩根軸，主軸和交叉軸；這兩個軸的方向是水平還是豎直不一定。

主軸

交叉軸，叫cross axis，開始和結束的一頭叫cross start 和 cross end。

外部容器的屬性：

①flex-direction

②flex-wrap

③flex-flow

④justify-content

⑤align-items

⑥align-content

它們分別的意思是：

①flex-direction 內部元素的排列方向（橫著排還是豎著排）

　　flex-direction：row、row-reverse、column、column-reverse

• row
  （默認值）：主軸為水平方向，起點在左端。
• row-reverse：主軸為水平方向，起點在右端。
• column：主軸為垂直方向，起點在上沿。
• column-reverse：主軸為垂直方向，起點在下沿。

②flex-wrap 內部元素太多了，在一條軸線上排不下了，換行嗎？怎麽換行？

　　　　flex-wrap：nowrap、wrap、wrap-reverse

nowrap（默認）：不換行

　　 wrap：換行，第一行在上方

　　 wrap-reverse：換行，第一行在下方

③flex-flow：是將①和②合起來簡寫

自然默認的是：flex-flow：row nowrap；

④justify-content：內部元素在主軸上的對齊方式（是都在中間、靠著main start、靠著main end、還是均勻分布）

 justify-content: flex-start | flex-end | center | space-between | space-around;

⑤align-items：內部元素在交叉軸上的對齊方式：

 align-items: flex-start | flex-end | center | baseline | stretch;

⑥align-content：多跟軸線下這個屬性派上用場，平常一根軸線沒用處。

• flex-start：與交叉軸的起點對齊。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊。
• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
• space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（默認值）：軸線占滿整個交叉軸

內部元素的屬性，主要的有下面幾個：

order：項目的排列順序，數字越小越靠前，越大越往後排

flex-grow：放大比例（default：0）

學習flex布局 資料總結