寫這篇文章的原因是：1、我很早就想寫了；2、昨天面試阿里時，在面試結束的最后被尊敬的面試官隨意問了一下display的屬性值；引起我開始寫作這篇文章。相信一些寫pc端的初級開發者還是會想不起display有flex這個屬性值的，哈哈。
很久以前就關注了flex布局，只是以前flex布局在pc端的瀏覽器兼容不是很友好，所以在開發中不是很經常使用，現在隨著瀏覽器的更新換代，很多開發者采取不再兼容ie8以下的瀏覽器的策略，這使得很多開發者都把眼光放到了flex布局上來，還有就是移動端的快速發展，原本pc端的產品都會移植到移動端上，然而flex在移動端上的兼容很友好。
我相信很多同學都想知道一個問題，我們為什么不使用我們傳統的開發形式：使用position和float來進行定位、浮動；卻要使用一個對瀏覽器不是很友好的flex呢？答案非常簡單：就是當你理解了它的使用方法時，你就會發現使用flex進行布局非常簡單，而且是響應式的，三個字：“快、準、恨”。不過在開發中，偶爾還是會碰到一些塊布局不準的問題。
其實我最想說的是“開始詳解一下flex的使用”，參考了 阮一峰老師的文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
想看圖像解說的請移步一峰老師的文章，已經對flex布局有一定的了解，想快速做每個屬性或每個屬性值的比較、快速復習、快速回憶屬性值的，可以瀏覽這篇文章。
一、父容器的屬性設定
1、flex容器的兩個主要概念
? ? ? ? 水平主軸（main axis）和垂直交叉主軸（cross axis）
這兩者是理解flex的開始，必須明白flex是有著這兩個東西的，因為在flex父塊內的子塊的分布順序排布方式與這兩者是緊密關聯的，請先記住一個是沿水平方向從左到右（或者從右到左。子元素的開始的位置稱為main start，結束為main end）排列子元素的水平主軸，另一個是從上到下（或者從下到上 。子元素的開始的位置稱為cross starts，結束為cross?end）排列子元素的垂直交叉主軸。
2、在flex容器內可設置的6屬性
1、flex-direction ? //控制主軸的布局方式（子元素的排列方向）
屬性值：
? ? ? ? ?1、row ?//子元素從水平方向的左端開始排列 ? （默認值）
? ? ? ? ?2、 row-reverse? //子元素從水平方向的右端開始排列
? ? ? ? ?3、column ? ?//子元素布局從垂直方向，從上往下
? ? ? ? ?4、column-reverse? //子元素布局從垂直方向，從下往上
2、flex-wrap //子元素的布局排列的換行設定
屬性值：
? ? ? ? ?1、nowrap ?//不換行 ?（默認值）
? ? ? ? ?2、wrap //換行，第一行在上方
? ? ? ? ?3、wrap-reverse // 換行，第一行在下方
3、flex-flow ?//前面flex-direction和flex-wrap的組合形式，作用：子元素的排列方式和換 ? ? ? ? ? ? ? ? ? ? ? ?//行情況的設定
屬性值：
? ? ? ? ?1、flex-wrap ?: ?row nowrap ?//（默認值）?
? ? ? ? ?2、類似1這種使用flex-direction和flex-wrap的屬性值的組合
4、justify-content ?//定義子元素在容器內的對齊方式（看一下前面的main start、main end 、cross start、cross end ）
屬性值：
? ? ? ? ? 1、flex-start ?//按flex-direction設置的排列方式的開始位置對齊 （默認值）
? ? ? ? ? 2、flex-end? //按flex-direction設置的排列方式的結束位置對齊
? ? ? ? ? 3、center ? ?//以排列方式的中間點向外擴散的形式，將子元素對齊排列
? ? ? ? ? 4、space-between ?//以main（start、end）或者cross（start、end），即布局方 ? ? ? ? ? ? ? ? 式的兩端作為同時開始的位置，向中間排列，每個子元素之間的間隔相等
? ? ? ? ? 5、space-around ?//每個子元素兩邊都擁有相等間隔，且子元素彼此的間隔不會重 ? ? ? ? ? ? ? 疊，所以子元素之間的間隔比子元素與邊框的間隔大一倍
5、align-items? //設定子元素在垂直交叉軸上的對齊形式（flex-direction父類：row）或者水平主軸的對齊形式（flex-direction父類：column）
? ? ? ? ?1、flex-start //起點對齊
? ? ? ? ?2、flex-end //終點對齊
? ? ? ? ?3、center ?//中點對齊
? ? ? ? ?4、baseline //子元素的第一行文字的基線對齊
? ? ? ? ?5、stretch ?//如果子元素未設定高度或者auto，將占滿整個容器 ? ? ? （默認值）
6、align-content ? ? //設定子元素在多根軸線情況下的對齊方式
? ? ? ? ?1、flex-start ?//起點對齊
? ? ? ? ?2、flex-end ?//終點對齊
? ? ? ? ?3、center ?//中間點對齊
? ? ? ? ?4、space-between ?//兩端對齊，軸線之間的間隔平均分布
? ? ? ? ?5、space-around ?//子元素的兩邊的間隔都相等，且間隔不會重疊
? ? ? ? ?6、stretch ?//軸線占滿整個交叉軸 ?（默認值）
我想說明的一點是：
我們簡單的看這些屬性和屬性的值是遠遠不夠的，每一個屬性都是緊密關聯的，在看時，我們應該要是思考一些問題，比如：
? ? ?1、flex-direction的優先級是高于justify-content的，我們只有設置了flex-direction（子元素的排列方式），再去考慮justify-content（子元素在容器內的對齊方式），因為justify-content是隨flex-direction的變化而變化的。
? ? ?2、margin：auto的優先級比justify高
? ? ?3、多思考，多嘗試寫不同屬性值的組合
二、子元素的6屬性設置
1、order ?//定義各個子元素的排列順序，數值越小，排列越靠前，默認為0，可為負數
? ? ?order：-1;（-1、-3、0、1、6、2......任意數字）
2、flex-grow ?//定義子元素的放大比例，默認為0（不放大），前提是父容器有空余空間
3、flex-shrink? //定義子元素的縮小比例，默認值為1，不能為負數，前提是父容器有空余空間
4、flex-basis ?//在子元素分配空余空間前，設定指定的子元素的空間大小，默認auto（原值）
5、flex ?//是flex-grow、flex-shrink、flex-basis的組合，默認值flex:0 1 auto;
6、align-self ?//允許單個子元素與其他子元素不一樣的對齊方式，可以覆蓋父元素設定的align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同stretch（填充滿）。
屬性值：
? ? ? ? ?1、auto ?//繼承父類的align-items的屬性值
? ? ? ? ?2、擁有和align-items一樣的5個屬性值，作用也是一樣的。
請注意：使用flex布局的容器，子元素的float、clear和vertical-align屬性將不起作用。
