前端頁面制作碍脏，布局主要用的定位+浮動進行布局》裨郑現(xiàn)在講講一種新的方法吓蘑，彈性盒子布局，flex的用法坟冲。
這里先給一張思維導圖磨镶，總結下全部的知識。
基本概念
采用 Flex 布局的元素健提，稱為 Flex 容器（flex container）琳猫，簡稱"容器"。它的所有子元素自動成為容器成員私痹，稱為 Flex 項目（flex item）脐嫂，簡稱"項目"统刮。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start账千，結束位置叫做main end侥蒙；交叉軸的開始位置叫做cross start，
容器屬性
flex-direction:屬性定義容器在主軸上的方向匀奏。即項目的排列方向鞭衩。他的值有row(主軸在水平方向，起點在左端)娃善，row-reverse(主軸在水平方向论衍，起點在右端)，column（主軸在垂直方向聚磺，起點在上方）坯台，column-reverse（主軸在垂直方向，起點在下方）瘫寝；
代碼
<style>
.div{
display:flex;
flex-direction:column/column-reverse/row/row-reverse;
}
</style>
<div class="div1>
<div class="div2"></div>
</div>
flex-wrap:定義如果在一條軸線上如何換行蜒蕾。他的值nowrap:不換行。wrap：換行 ?wrap-reverse,換行焕阿，第一行在下方咪啡。
justify-content屬性定義項目在水平軸上的排列方向。他的值有以下幾個：
flex-start:左對齊捣鲸；
flex-end:右對齊
center：中點對齊瑟匆。
space-between:兩端對齊，項目之間的間隔都相等栽惶。
space-around:每個項目的兩側都相等愁溜，項目之間的間隔比項目與邊框的間隔都相等。
align-items屬性定義項目在交叉軸上如何對齊外厂。他的值是1flex-start:交叉軸的起點對齊冕象。2flex-end:交叉軸的終點對齊。cener:j交叉軸的中點對齊
align-content 屬性定義在多根軸線上的對齊方式汁蝶。如果項目只有一根軸線渐扮，該項目不起作用。他的值：
1flex-start ?與交叉軸的起點對齊掖棉。
2flex-end ?與交叉軸的終點對齊墓律。
3center ?與交叉軸的中點對齊。
4space-between ?與交叉軸兩端對齊幔亥，軸線之間的間隔平均分布耻讽。
5space-around:每根軸線的兩側的間隔都相等，所以軸線之間的間隔與邊框的間隔大一倍帕棉。
6strech:(默認值)軸線占滿整個交叉軸
項目屬性
1order ?定義項目的排列順序针肥，數(shù)值越小饼记，排列越靠前，默認為0慰枕；
2flex-grow ?屬性定義項目的放大比例具则，默認為0，即如果存在剩余空間具帮，也不放大博肋。
3flex-shrink? flex-shrink屬性定義了項目的縮小比例，默認為1匕坯，即如果空間不足束昵，該項目將縮小拔稳。
4flex-basis? flex-basis屬性定義了在分配多余空間之前葛峻，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性巴比，計算主軸是否有多余空間术奖。它的默認值為auto，即項目的本來大小轻绞。
5flex? flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫采记，默認值為0 1 auto。后兩個屬性可選政勃。
6align-self? align-self屬性允許單個項目有與其他項目不一樣的對齊方式唧龄，可覆蓋align-items屬性。默認值為auto奸远，表示繼承父元素的align-items屬性既棺，如果沒有父元素，則等同于stretch懒叛。
