這就是flex
對flex的第一印象就是解決響應佈局存在的，使得佈局的設置更靈活，但隨之而來的是需要明白flex內部是怎麼繪製的，一直以來就是看一下其api, 大概知道什麼意思，上來就開始寫，但對這個玩意卻一直沒有達到朋友的地步，這就是flex, 根據自己的demo慢慢來撕開它
首先，flex就是一個容器，一個大盒子，凡是在這個盒子內的元素都要尊師其制定的位置規則，這個元素該在哪，另外一個元素該在哪，我有我的規則，要想在裡面呆著，就要遵守規則，否則展示一團亂。
規則一. 佈局方向 橫向還是縱向。flex-direction: row，裡面的元素按照橫向排列，向左看！。 column: 乖乖的按照縱向排好對，向上看！
規則二. 所處位置justify-content, align-items, align-content
什麼意思呢？站好隊了，但是在這個flex盒子裏的位置還沒明確，從哪開始站隊，並保持這個方向。決定站的位置有兩個：先看第一個justify-content。這個規則決定了你在水平方向的位置，默認的位置是在最左邊.
這兩個規則都有同樣的位置選擇：請看下圖
從上圖可以看出，justify-content就相當於一個指揮官，裡面的人從開始給我站好，從中間給我站好，從末尾開始站好，兩邊分開站好，均勻排列站好。裡面的這些小弟，乖乖的在指定的方向上站好。
align-content和align-items一樣，區別在於flex盒子內元素是否是按一行站好，如果分成了多個隊列，那麼align-content會把多個隊列當做成一個整體，再按照左，中，底等戰隊，否則每一行各自應用戰隊規則。就好比軍訓，各隊向左向右看齊，齊步走，走啊走，走到center,或者flex-start, flex-end的位置；另外就是各隊按照小組散開，各小組按照所劃分的區域向左向右看齊。
規則三. 在我內部超過一行是否要換行:flex-wrap.
什麼意思呢？就是說我的房間就這麼大，你們這些小弟按照一行或者一列站好，按照上圖所示，人太多，一行不夠站，那怎麼辦，就是靠這個規則來指定了，是要換到第二行還是給你們每個人瘦身，還是站在一行，請看下圖：
萬能分割線^^………………………………………………………………………………………………………………………………………………………………………………
好了，說完了那個盒子上的屬性，看看盒子內的元素的一些規則把，總不能只能指揮官有規則把，我也得有點自我張揚的個性把，展示自我個性的時候到了
規則1. 戰隊順序：order
一開始，小兵門按照盒子內出現的順序依次站好，也就是先到先得，誰讓你來的晚的，往後站吧！
那有的人不願意了，我們的戰隊順序我們要自己商量。約定一個值，order吧，誰分到的值約高，誰往後站，0是老大
這個就牛逼了啊，隨意調配每個元素的位置，我不想站這了，更改小數字，調下位置，好像小學考試調位置
規則2. 所佔空間大小佔比flex-grow, flex-shrink
有的人覺得我有點胖，我要多一點空間，太擠了，好吧，自我膨脹吧,給你這個權利: flex-grow設置高一點，其它兄弟看到會給你騰位置的
同理，我瘦，我想主動減少我的位置，就是這麼任性！
這個shrink看來就是犧牲自我，成全他人， grow就是我就要爽，你麼辛苦點
至於flex-basis這個有點繞，不考慮每個元素的自我grow和shrink, 父容器寬度去掉子元素空白元素（比如該元素內容就撐開10px,我給你給這個元素預留10px, 就可以通過flex-basis來設置，）就，所以就是去掉每個元素預留的空間外，取值為extra, extra再按照grow比列給每個元素分每個元素內容可以佔多少，如果沒設置grow,則為1，平均分，最終渲染到頁面上每個元素的寬度=basis + extra*(grow+grow)/n
可參考：flex和flex:1的含義 - 朱帥 - 博客園
後續： flex:1 等價於flex-grow:1, flex-shrink:1(感覺沒啥用，在實現兩欄佈局的時候)，flex:basis:0%.其實實驗測試只要flex-grow:1即可，自動填充剩餘空間。當然，如果兩個元素都設置flex-grow就不行了，這就產生競爭關係了，憑什麼讓你佔完，就是這樣。如果你不設置，我設置了flex-grow:1, 不好意思，剩下的空間我全要了，謝謝哈。^^
這就是 flex暫時先到這， 後續想到新的再來更新，這就是系列第一季我來了！
推薦閱讀：
