flex盒子模型由容器（flex container）以及容器的直接子元素（flex item）組成。

以容器（flex container）定義，有主軸（main axis）以及交叉軸（cross axis）,主軸的開始位置（與邊框的交叉點）叫做main start,結束位置叫做main end.交叉軸的開始位置叫做cross start，結束位置叫做cross end。

（註意:當布局排列方式變化的時候，main axis跟cross axis的方向也會跟著變化,這一點非常重要）主軸(main axis)可以是水平方向,也可以是垂直方向,而交叉軸(cross axis)始終是與主軸垂直

display: flex | inline-flex(適用於父類容器元素上)

定義一個flex容器，內聯或者根據指定的值，來作用於下面的子類容器。

box：將對象作為彈性伸縮盒顯示。（伸縮盒最老版本2009）

flexbox：將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本2011）

flex：將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）

首先得指定元素是flex布局     塊狀元素 -> display:flex     行內元素 -> display:inline-flex     例如:     .box{       display:flex;      }

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：反轉 wrap 排列,(下一行位置與交叉軸位置相反)

flex-flow (適用於父類容器上) //flex-direction和flexwrap的符合寫法

flex-flow: <‘flex-direction’> || <‘flex-wrap’> [ flex-direction ]：定義彈性盒子元素的排列方向。 [ flex-wrap ]：定義彈性盒子元素溢出父容器時是否換行。

例如：flex-flow:row nowrap;

justify-content (適用於父類容器上)：確定在主軸方向上的對齊方式

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

flex-start：該行起始位置(默認值)

flex-end：該行結束位置

center：該行中央,空間不足,則超出空間

space-between：平均地分布在行裏

space-around：平均地分布在行裏，兩端保留子元素與子元素之間間距大小的一半。

space-evenly:均勻的排列每個元素，每個元素之間的距離相等

align-items(適用於父類容器上)：確定在交叉軸上的對齊方式

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

flex-start：交叉軸的起始位置

flex-end：交叉軸的結束位置

center：在交叉軸居中

baseline：在基準線上保持對齊

stretch：如果條目的交叉軸尺寸的計算值是“auto”，則其實際使用的值會使得盒子在交叉軸方向上盡可能地占滿。（設置高度後是不起作用的）

align-content (適用於父類容器上)：用來處理交叉軸空白空間（對單行不起作用）

align-content: flex-start | flex-end | center | space-between | space-around | stretch

flex-start：行集中於容器的交叉軸起始位置

flex-end:行集中於容器的交叉軸結束位置

center：行集中於容器的中央

space-between：行在容器中均勻分布。

space-around：行在容器中均勻分布，兩端保留子元素與子元素之間間距大小的一半。

space-evenly:均勻的分布在交叉軸中

stretch：伸展行來占滿剩余的空間。多余的空間在行之間平均分配，使得每一行的交叉軸尺寸變大。

align-self (適用於子類容器上)：

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

flex-start：交叉軸的起始位置

flex-end：交叉軸的結束位置

center：在交叉軸居中

baseline：在基準線上保持對齊

stretch：如果條目的交叉軸尺寸的計算值是“auto”，則其實際使用的值會使得盒子在交叉軸方向上盡可能地占滿。（設置高度後是不起作用的）

當"align-self"的值為 auto 時，其計算值是父節點的屬性"align-items"的值。如果該節點沒有父節點，則計算值為"stretch"。

用來覆寫容器指定的對齊方式

order (適用於子元素)：用來設置自容器的排列順序

用整數值來定義排列順序，數值小的排在前面。可以為負值。

flex:適用於子類容器:設置或檢索伸縮盒對象的子元素如何分配空間。

復合屬性。

如果縮寫flex:1, 則其計算值為：1 1 0%；none：none關鍵字的計算值為: 0 0 auto

flex:auto 1 1 auto; flex:2 100px; 2 1 100px;

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

[ flex-grow ]：定義彈性盒子元素的擴展比率。默認值：0（當有內容剩余時，每個子容器按照這個比例擴展內容）

[ flex-shrink ]：定義彈性盒子元素的收縮比率。默認值：1（收縮比例，當有內容溢出時，這個屬性才會起作用）

[ flex-basic ]：定義彈性盒子元素的默認基準值。默認值：auto（擴展或收縮內容時，以這個值為基準）若為auto,則以width為基準。其余以值為基準

flex布局的盒子模型