css3新屬性partB

這一part講的是css3帶來的新的佈局方式：

對於頁面佈局，是咱們前端工做者須要注意的一個重點，pc端和移動設備相比，移動設備端的佈局方式尤其重要，咱們舉一個例子

咱們先嚐試一下不用css3的佈局方式解決一下，不逼逼看代碼：

咱們嘗試這用百分比佈局把這個佈局給布好了，看代碼能夠得知咱們中間部分的高度是頁面總體高度的82%。可是數學好的同窗能夠一眼看出問題，咱們如今用的機器型號是iphone5，而iphone5的高度是568，若是咱們換成iphone6呢

iphone6的高度是667因此咱們的頁面下面仍是出現了底部白框，算是佈局失敗了.....
OK，我也不賣關子了，鋪墊了這麼多，我要開始給你們介紹一個移動端必不可少的佈局工具彈性盒模型（flex）
這個工具的主要用法就是，在沒法肯定機型的狀況下，給頁面裏面的部分模塊彈性賦予高度，不逼逼，看代碼

咱們經過更換各類個樣的手機型號，甚至於pad能夠看出，中間設置flex=1的那個content標籤的高度根據屏幕大小的變化也在變化，這就是彈性佈局，神奇麼？咱們接下來詳細介紹一下彈性佈局：
1.flex-direction
這個屬性決定了主軸的方向，那麼問題來了：啥是主軸 還記得咱們在代碼裏面寫的一句

這句話的意思是讓全部的元素依照從上向下的方向來佈局，那麼若是理解了主軸，輔軸會更加好理解，就是垂直於主軸的那個方向，若是主軸是從上到下，輔軸就是從左到右

flex-direction須要有四個值
row | row-reverse | column | column-reverse
row：主軸的方向是從左向右
row-reverse：主軸的方向是從右向左
column：主軸的方向是從上到下
column-reverse：主軸的方向是從下到上
咱們用代碼看一下：

頭部和尾部顛倒了

左右顛倒了
那有的同窗要說了，若是我想要橫着排列4個元素分紅兩行均勻分佈怎麼辦呢？
這就要用到了flex-wrap 2.flex-wrap

flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的複合屬性。 其中flex-direction 屬性規定靈活項目的方向，flex-wrap屬性規定靈活項目是否拆行或拆列。