移動端flex布局最近挺火的，空閒時間也看了些資料！好記性不如賴筆頭，做下筆記吧。閒話少說 先上**。
"container">
"header">頭部
"center">
"dyleft">左欄div
"dycenter">dycenter
"dyright">右欄divx
"footer">底部
複製**
css **：
html, body
#container
#header, #footer
#center
#dyleft, #dyright
#dycenter
複製**
flex屬性解釋：
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
flex-grow官方解釋：設定或檢索彈性盒的擴充套件比率。
根據彈性盒子元素所設定的擴充套件因子作為比率來分配剩餘空間。
.flex
.flex li:nth-child(1)
.flex li:nth-child(2)
.flex li:nth-child(3)
flex-grow的預設值為0，如果沒有顯示定義該屬性，是不會擁有分配剩餘空間權利的。
本例中b,c兩項都顯式的定義了flex-grow，flex容器的剩餘空間分成了4份，其中b佔1份，c佔3分，
即1:3
flex容器的剩餘空間長度為：600-200-50-50=300px，所以最終a,b,c的長度分別為：
a: 200px
b: 50+(300/4*1)=125px
a: 50+(300/4*3)=275px
複製**
flex-shrink：用數值來定義收縮比率。不允許負值。
設定或檢索彈性盒的收縮比率。
.flex
.flex li
.flex li:nth-child(3)
flex-shrink的預設值為1，如果沒有顯示定義該屬性，將會自動按照預設值1在所有因子相加
之後計算比率來進行空間收縮。
本例中c顯式的定義了flex-shrink，a,b沒有顯式定義，但將根據預設值1來計算，可以看到總共
將剩餘空間分成了5份，其中a佔1份，b佔1份，c佔3分，即1:1:3
我們可以看到父容器定義為400px，子項被定義為200px，相加之後即為600px，超出父容器200px。
那麼這麼超出的200px需要被a,b,c消化
通過收縮因子， 200 /5 = 40;
最後a,b,c的實際寬度分別為：200-40=160px, 200-40=160px, 200-120=80px
複製**
flex-basis：length|percent | auto | content
用長度值來定義寬度。不允許負值
percent
用百分比來定義寬度。不允許負值
auto：
無特定寬度值，取決於其它屬性值
content：
基於內容自動計算寬度
設定或檢索彈性盒伸縮基準值。
複製**
**顯示 box 總共寬 600px 每個li 設定寬100px .一共5個。那麼就是500px.但是li 也就是c 寬設定了600px. 我去 這一共寬600 + 400 =1000px 大於600px.不行啊肯定！
那怎麼辦？那就把別的li壓縮啊。一共1000.那麼100/1000 = 0.1（abde佔比)
600/1000 = 0.6（c的佔比）
1000-600 = 400px 那麼這400px *0.1 = 40；400*0.6 = 240;
so a、b、d、e 寬度：100-40=60；
c:600- 60*4 = 360；
ok？？？應該沒毛病吧
？？？google瀏覽器上為毛顯示的寬是61？？狐火上顯示60.8？？我***算的是60？難道是誤差？
有知道的請留下言 謝謝！！
備註：
使用flex實現聖杯布局
聖杯布局就是所說的3欄布局,左右定寬,中間自適應。使用position和float來實現就不說了，主要說一下用flex怎麼來實現 html 我是左邊 我是中間 我是右邊 css content left middle rightflex代表3個屬性flex grow,flex shrink和flex...
flex 聖杯布局
基本思路 聖杯布局分為3段 上 中 下。中段被分為 左 中 右3塊。1 採用flex布局時，先把彈性容器主軸設定為垂直方向 flex direction column 2 上 中 下3塊彈性專案設定均勻拉伸 flex 1 或固定上 下兩端大小，讓中間自動拉伸。注意 flex 拉伸是方向為主軸方向 3...
flex做的聖杯布局
首先聖杯布局是兩列固定寬度，中間自適應。我直接說一下步驟，上圖，上圖 1.步驟1 2.步驟2 上面就是基本的步驟，下面我把 給大家，大家感興趣自己拿回去偷偷的擼就可以 將整個頁面設定為彈性盒 html,body 設定頭部和尾部的顏色 footer,header 設定中間內容區域樣式 center 設...