整體布局
為什么要用flex布局算色，flex之前有什么問題嗎尽爆？當(dāng)然啦怎顾，比如你怎么做到用正常流把兩個(gè)div一個(gè)靠左一個(gè)靠右。
1.搞兩個(gè)div漱贱，中間用margin槐雾。這樣只要屏幕一縮放就bug
2.搞三個(gè)div，中間div不顯示邊框幅狮。一樣屏幕縮放就bug募强。不過可以強(qiáng)制不換行，然后寬度按百分比來可以搞定縮放bug崇摄，但是會(huì)有其他bug擎值。
為什么會(huì)這樣呢，因?yàn)檎Ａ鞅仨殢淖笸野≈鹨郑砸傻粽Ａ魉詅loat就出現(xiàn)了幅恋。
但是float也解決不了很多需求所以flex出現(xiàn)了。
flex之前無非就是正常流和float
內(nèi)聯(lián)元素從左到右泵肄，塊級(jí)元素從上到下排列
浮動(dòng)+清除浮動(dòng)
這張圖說明了用flex調(diào)整方向的時(shí)候的原理品追。
row：意思是main軸是橫向的
row-revers：意思是main軸需要翻轉(zhuǎn)。這狀態(tài)下的justify-content:flex-end/start的方向也會(huì)翻轉(zhuǎn)
里面的元素叫做flex item 外面的元素叫flex container
劃重點(diǎn)了冯丙，記不住不用記了到時(shí)候有需求反正就三個(gè)肉瓦，row/row-reverse,column/column-reverse,wrop-revers輪著試一下就知道了。
flex-direction有 6個(gè)取值胃惜，主要是1泞莉，2，5船殉，6
flex-wrap
flex默認(rèn)是不換行的鲫趁，如果不夠的話會(huì)把里面的div擠擠
flex-flow
上面兩個(gè)可以同時(shí)用
justify-content
flex-direction是row的時(shí)候主軸就是橫軸。同理是column的時(shí)候主軸是縱軸
between
around
start
end
center
align-items
這個(gè)屬性不能把高度限制死利虫。
end
start（end和start用得最多）
center
默認(rèn)stretch
align-content
和justify-content很像挨厚，但是它是控制行與行。justify-content是控制div和div之間
局部布局
fex-grow增加的比例糠惫，關(guān)鍵字是比例
把多余空間給了child1
3個(gè)孩子按比例分了多余的空間
flex-shrink收縮的比例
flex-bosis
flex
order
align-self
不寫寬度的時(shí)候疫剃，寬度由內(nèi)容決定
1
2
3
雙飛翼就是3列，左右兩列的寬度一樣
4
3句話就可以了硼讽，比其他方便多了巢价。
作業(yè)
flex游戲http://flexboxfroggy.com/#zh-cn
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
需要3句話吧，不用flex-direction:column給倒過來不行的吧
一句代碼就夠了
order好像看給你分幾份固阁，它好像就分兩份壤躲。我向右就是1，2您炉，3都行柒爵，向左就是-1，-2赚爵，-3都行
除了flex-dirction可以橫向豎向翻轉(zhuǎn)棉胀，還有flex-float:wrap-reverse換行翻轉(zhuǎn)。reverse是交換的意思冀膝，所以知道英語搜mdn確實(shí)好用唁奢。
