寫這篇文章的原因是：1餐屎、我很早就想寫了场靴；2、昨天面試阿里時忠怖，在面試結(jié)束的最后被尊敬的面試官隨意問了一下display的屬性值添履；引起我開始寫作這篇文章。相信一些寫pc端的初級開發(fā)者還是會想不起display有flex這個屬性值的脑又，哈哈暮胧。
很久以前就關(guān)注了flex布局，只是以前flex布局在pc端的瀏覽器兼容不是很友好问麸，所以在開發(fā)中不是很經(jīng)常使用往衷，現(xiàn)在隨著瀏覽器的更新?lián)Q代，很多開發(fā)者采取不再兼容ie8以下的瀏覽器的策略严卖，這使得很多開發(fā)者都把眼光放到了flex布局上來席舍，還有就是移動端的快速發(fā)展，原本pc端的產(chǎn)品都會移植到移動端上哮笆，然而flex在移動端上的兼容很友好来颤。
我相信很多同學(xué)都想知道一個問題汰扭，我們?yōu)槭裁床皇褂梦覀儌鹘y(tǒng)的開發(fā)形式：使用position和float來進行定位、浮動福铅；卻要使用一個對瀏覽器不是很友好的flex呢萝毛？答案非常簡單：就是當(dāng)你理解了它的使用方法時，你就會發(fā)現(xiàn)使用flex進行布局非常簡單滑黔，而且是響應(yīng)式的笆包，三個字：“快、準(zhǔn)略荡、恨”庵佣。不過在開發(fā)中，偶爾還是會碰到一些塊布局不準(zhǔn)的問題汛兜。
其實我最想說的是“開始詳解一下flex的使用”巴粪，參考了 阮一峰老師的文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
想看圖像解說的請移步一峰老師的文章，已經(jīng)對flex布局有一定的了解粥谬，想快速做每個屬性或每個屬性值的比較肛根、快速復(fù)習(xí)、快速回憶屬性值的帝嗡，可以瀏覽這篇文章。
一璃氢、父容器的屬性設(shè)定
1哟玷、flex容器的兩個主要概念
? ? ? ? 水平主軸（main axis）和垂直交叉主軸（cross axis）
這兩者是理解flex的開始，必須明白flex是有著這兩個東西的一也，因為在flex父塊內(nèi)的子塊的分布順序排布方式與這兩者是緊密關(guān)聯(lián)的巢寡，請先記住一個是沿水平方向從左到右（或者從右到左。子元素的開始的位置稱為main start椰苟，結(jié)束為main end）排列子元素的水平主軸抑月，另一個是從上到下（或者從下到上 。子元素的開始的位置稱為cross starts舆蝴，結(jié)束為cross?end）排列子元素的垂直交叉主軸谦絮。
2、在flex容器內(nèi)可設(shè)置的6屬性
1洁仗、flex-direction ? //控制主軸的布局方式（子元素的排列方向）
屬性值：
? ? ? ? ?1层皱、row ?//子元素從水平方向的左端開始排列 ? （默認(rèn)值）
? ? ? ? ?2、 row-reverse? //子元素從水平方向的右端開始排列
? ? ? ? ?3赠潦、column ? ?//子元素布局從垂直方向叫胖，從上往下
? ? ? ? ?4、column-reverse? //子元素布局從垂直方向她奥，從下往上
2瓮增、flex-wrap //子元素的布局排列的換行設(shè)定
屬性值：
? ? ? ? ?1怎棱、nowrap ?//不換行 ?（默認(rèn)值）
? ? ? ? ?2、wrap //換行绷跑，第一行在上方
? ? ? ? ?3拳恋、wrap-reverse // 換行，第一行在下方
3你踩、flex-flow ?//前面flex-direction和flex-wrap的組合形式诅岩，作用：子元素的排列方式和換 ? ? ? ? ? ? ? ? ? ? ? ?//行情況的設(shè)定
屬性值：
? ? ? ? ?1、flex-wrap ?: ?row nowrap ?//（默認(rèn)值）?
? ? ? ? ?2带膜、類似1這種使用flex-direction和flex-wrap的屬性值的組合
4吩谦、justify-content ?//定義子元素在容器內(nèi)的對齊方式（看一下前面的main start、main end 膝藕、cross start式廷、cross end ）
屬性值：
? ? ? ? ? 1、flex-start ?//按flex-direction設(shè)置的排列方式的開始位置對齊 （默認(rèn)值）
? ? ? ? ? 2芭挽、flex-end? //按flex-direction設(shè)置的排列方式的結(jié)束位置對齊
? ? ? ? ? 3滑废、center ? ?//以排列方式的中間點向外擴散的形式，將子元素對齊排列
? ? ? ? ? 4袜爪、space-between ?//以main（start蠕趁、end）或者cross（start、end）辛馆，即布局方 ? ? ? ? ? ? ? ? 式的兩端作為同時開始的位置俺陋，向中間排列，每個子元素之間的間隔相等
? ? ? ? ? 5昙篙、space-around ?//每個子元素兩邊都擁有相等間隔腊状，且子元素彼此的間隔不會重 ? ? ? ? ? ? ? 疊，所以子元素之間的間隔比子元素與邊框的間隔大一倍
5苔可、align-items? //設(shè)定子元素在垂直交叉軸上的對齊形式（flex-direction父類：row）或者水平主軸的對齊形式（flex-direction父類：column）
? ? ? ? ?1缴挖、flex-start //起點對齊
? ? ? ? ?2、flex-end //終點對齊
? ? ? ? ?3焚辅、center ?//中點對齊
? ? ? ? ?4映屋、baseline //子元素的第一行文字的基線對齊
? ? ? ? ?5、stretch ?//如果子元素未設(shè)定高度或者auto同蜻，將占滿整個容器 ? ? ? （默認(rèn)值）
6秧荆、align-content ? ? //設(shè)定子元素在多根軸線情況下的對齊方式
? ? ? ? ?1、flex-start ?//起點對齊
? ? ? ? ?2埃仪、flex-end ?//終點對齊
? ? ? ? ?3乙濒、center ?//中間點對齊
? ? ? ? ?4、space-between ?//兩端對齊，軸線之間的間隔平均分布
? ? ? ? ?5颁股、space-around ?//子元素的兩邊的間隔都相等么库，且間隔不會重疊
? ? ? ? ?6、stretch ?//軸線占滿整個交叉軸 ?（默認(rèn)值）
我想說明的一點是：
我們簡單的看這些屬性和屬性的值是遠(yuǎn)遠(yuǎn)不夠的甘有，每一個屬性都是緊密關(guān)聯(lián)的诉儒，在看時，我們應(yīng)該要是思考一些問題亏掀，比如：
? ? ?1忱反、flex-direction的優(yōu)先級是高于justify-content的，我們只有設(shè)置了flex-direction（子元素的排列方式）滤愕，再去考慮justify-content（子元素在容器內(nèi)的對齊方式）温算，因為justify-content是隨flex-direction的變化而變化的。
? ? ?2间影、margin：auto的優(yōu)先級比justify高
? ? ?3注竿、多思考，多嘗試寫不同屬性值的組合
二魂贬、子元素的6屬性設(shè)置
1巩割、order ?//定義各個子元素的排列順序，數(shù)值越小付燥，排列越靠前宣谈，默認(rèn)為0，可為負(fù)數(shù)
? ? ?order：-1;（-1键科、-3闻丑、0、1萝嘁、6梆掸、2......任意數(shù)字）
2扬卷、flex-grow ?//定義子元素的放大比例牙言，默認(rèn)為0（不放大），前提是父容器有空余空間
3怪得、flex-shrink? //定義子元素的縮小比例咱枉，默認(rèn)值為1，不能為負(fù)數(shù)徒恋，前提是父容器有空余空間
4蚕断、flex-basis ?//在子元素分配空余空間前，設(shè)定指定的子元素的空間大小入挣，默認(rèn)auto（原值）
5亿乳、flex ?//是flex-grow、flex-shrink、flex-basis的組合葛假，默認(rèn)值flex:0 1 auto;
6障陶、align-self ?//允許單個子元素與其他子元素不一樣的對齊方式，可以覆蓋父元素設(shè)定的align-items屬性聊训。默認(rèn)值為auto抱究，表示繼承父元素的align-items屬性，如果沒有父元素带斑，則等同stretch（填充滿）鼓寺。
屬性值：
? ? ? ? ?1、auto ?//繼承父類的align-items的屬性值
? ? ? ? ?2勋磕、擁有和align-items一樣的5個屬性值妈候，作用也是一樣的。
請注意：使用flex布局的容器朋凉，子元素的float州丹、clear和vertical-align屬性將不起作用。
