如何開啟彈性布局 開啟彈性布局的標籤即為」容器「
.box
、、、、、、
flex-direction 決定主軸的方向
flex-wrap 容器排布在一條線（軸線）上，當排布滿的是否換行
flex-flow 是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap
justify-content 定義了在主軸上的對齊方式
align-items 定義了在交叉軸上如何對齊。
align-content 定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用
.box
row（預設值）：主軸為水平方向，起點在左端。
、、、相容寫法、、、
box-orient:horizontal;
box-direction:normal;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-moz-box-orient:horizontal;
-moz-box-direction:normal;
flex-direction:row;
-webkit-flex-direction:row;
、、、、、、
row-reverse：主軸為水平方向，起點在右端。
、、、相容寫法、、、
box-orient:horizontal;
box-direction:reverse;
-webkit-box-orient:horizontal;
-webkit-box-direction:reverse;
-moz-box-orient:horizontal;
-moz-box-direction:reverse;
flex-direction:row-reverse;
-webkit-flex-direction:row-reverse;
、、、、、、
column：主軸為垂直方向，起點在上沿。
、、、相容寫法、、、
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-moz-box-orient:vertical;
-moz-box-direction:normal;
flex-direction:column;
-webkit-flex-direction:column;
、、、、、、
column-reverse：主軸為垂直方向，起點在下沿。
、、、相容寫法、、、
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
-moz-box-orient:vertical;
-moz-box-direction:reverse;
box-orient:vertical;
box-direction:reverse;
flex-direction:column-reverse;
-webkit-flex-direction:column-reverse;
、、、、、、
.box
nowrap（預設）：不換行
-webkit-flex-wrap:nowrap;
-webkit-box-lines:single;
-moz-flex-wrap:nowrap;
flex-wrap:nowrap;
wrap：換行，第一行在上方。
、、、相容寫法、、、
-webkit-flex-flow:row wrap;
-webkit-box-orient:horizontal;
-webkit-box-lines:multiple;
-moz-flex-flow:row wrap;
box-orient:horizontal;
box-lines:multiple;
flex-flow:row wrap;
、、、、、、
wrap-reverse：換行，第一行在下方。
.box.box
flex-start（預設值）：左對齊
flex-end：右對齊
center: 據中對齊
、、、相容寫法、、、
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
-moz-box-orient:vertical;
-moz-box-direction:reverse;
box-orient:vertical;
box-direction:reverse;
flex-direction:column-reverse;
-webkit-flex-direction:column-reverse;
、、、、、、
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
.box
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。
order 定義專案的排列順序。數值越小，排列越靠前，預設為0
flex-grow 定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大
flex-shrink 定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小
flex-basis 定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小
flex 是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選 【常用】
~~~、、、相容寫法、、、
-webkit-box-flex:num;
-moz-box-flex:num;
flex:num;
-webkit-flex:num;
align-self align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch
##### align-self 具有的屬性
auto： （ 預設值）交叉軸的起點對齊。
flex-start： 交叉軸的起點對齊
flex-end： 交叉軸的終點對齊
center: 交叉軸的據中對齊
baseline 專案的第一行文字的基線對齊
stretch 軸線佔滿整個交叉軸
前端彈性布局使用
為什麼需要彈性布局 傳統 display float position屬性,它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。flex 彈性布局誕生 1.flex direction，指定主軸是哪一根 row column 主軸方向 row reverse,column reverse 2....
彈性布局總結
彈性布局對於移動端頁面開發其實還是蠻重要的，今天來一些總結吧 flexbox 為display屬性賦予了乙個新的值 即box 值 flexbox的屬性有很多，記錄一些比較常用的屬性 display box 該屬性會將此元素及其直系子代加入彈性框模型中。flexbox 模型只適用於直系子代 box o...
彈性布局（flex）總結
flex direction row row reverse column column reverse row 從左到右 預設 row reverse 從右到左 column 從上到下 column reverse 從下到上 nowrap 不換行，佔滿一行會被擠小 預設 wrap 換行 wrap ...