box-flex:新的css3屬性，一種新的盒子模型——彈性盒子模型(Flexible Box Model).
使用該模型，可以很輕松的創建自適應瀏覽器窗口的流動布局或自適應字體大小的彈性布局,喲。
第一步將父元素: display:box;這樣可以開始分配盒子了。
屬性值說明：
1.box-flex:用來按比例分配父標簽的寬度(或高度)空間;(1:1的比例可以很和諧，數值變動就會亂套，在實際需求中可以要一個或多個固定寬度，另外的一個自適應：box-flex值為一。）
2.box-orient：用來確定子元素的方向。是橫排還是豎排。
其值有：horizontal | vertical | inline-axis | block-axis | inherit
其中，inline-axis是默認值。且horizontal與inline-axis的表現似乎一致的，讓子元素橫排；而vertical與block-axis的表現也是一致的，讓元素縱列。（常用值為horizontal和vertical）。
3.box-direction是用來確定子元素的排列順序。
其值有：normal | reverse | inherit
其中normal是默認值，表示按照正常順序從左往右，由上至下，先出現的元素，就上面或是左邊。而reverse表示反轉，原本從左往右應該是1-2-3的，結果顯示確實3-2-1。
4.box-align與box-pack都是決定盒子內部剩余空間怎么使用的。
其中box-align表示為橫排時元素在垂直方向上的對齊方式。
其值有：start | end | center | baseline | stretch
其中其中stretch為默認值，為拉伸，也就是父標簽高度過高，其孩子元素的高度就多高，這點方便於自適應布局時使用。start表示頂邊對齊，end為底部對齊，center為居中對齊，baseline表示基線對齊。
其中box-pack表示父標簽有水平剩余空間時子元素的對齊方式。
其值有：start | end | center | justify
5.box-lines是用來決定子元素是否換行顯示。
其值：single | multiple
實踐：（想要布局成app的樣子，上下兩欄固定高度不動，中間內容自適應高度且有滾動條出來）。
成果：基本滿足需求，后續還要多研究。
所遇故障：
1.box-flex不能在有過多文本內容的時候實現自適應比例分配。解決方案是要有一個固定的數值，剩下的box-flex：1；然后再用display：box；來繼續后續的布局。
2.想要出現滾動條的地方在火狐里不出現，解決方法是在父級一樣的變成display:box;
3.包裹img的div不能做到自適應寬度，不清楚原因，以后繼續研究。暫時解決辦法是將效果加到了img本身上面去。
4.將頁面縮小時要注意瀏覽器本身的寬度限定，太窄了會有疑問的哇。
總結：值得后續研究。先把例子放上~~~~。
小驚喜：看到一個box-sizing的屬性。好玩~~~
參考文檔：
1.http://www.zhangxinxu.com/wordpress/?p=1338 鑫空間
2.一個參考demo http://hacks.mozilla.org/wp-content/uploads/2010/04/exemple-blog.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>重設密碼</title> 6 <style type="text/css"> 7 *{margin:0; padding:0;} 8 html,body{width:100%; height:100%;} 9 body{display:-moz-box; -moz-box-orient:horizontal;} 10 </style> 11 </head> 12 <body> 13 <style> 14 .layout{width:500px; height:100%; 15 display:-moz-box; display:-webkit-box; 16 margin:0 auto; border:1px solid #ccc;border-top:0 none; border-bottom:0 none; 17 -moz-webkit-orient:vertical; -webkit-box-orient:vertical;} 18 .top{-webkit-box-flex:1; -moz-box-flex:1; background:#fff; overflow:auto; padding:20px;} 19 .fixed{height:100px; background:#eee; text-align:center;} 20 h4{color:#999; font-size:20px; border-bottom:3px solid #ccc; padding:14px;} 21 .nav{margin:20px 0px;} 22 .nav li{list-style:none; padding:10px; color:#ff2e00; font-size:16px;} 23 p{margin:10px; border:1px dashed #ccc; border-left:0 none; border-right:0 none; padding:10px; color:#000;} 24 .img_div{} 25 .img_div img{display:block; border:0 none; padding:10px; margin:10px; border:1px solid #ccc;} 26 .fixed a{width:80px; padding:10px; background:#eee; 27 text-align:center; color:blue; display:inline-block; margin-right:20px; margin-top:20px; border-radius:5px; border:1px solid #ccc;} 28 .content{width:100%; height:100%; display:-moz-box; display:-webkit-box; -moz-box-flex:1; color:#fff; 29 -moz-box-orient:horizontal; -webkit-box-orient:horizontal;} 30 .mi_one{width:300px; background:#000;} 31 .mi_two_con{-webkit-box-flex:1; -moz-box-flex:1; height:100%;} 32 .mi_two{width:40%; float:left; height:100%; background:#f00;} 33 .mi_three{width:60%; float:left; height:100%; background:blue; -moz-box-pack:start; display:-moz-box; display:-webkit-box; 34 -moz-box-orient:vertical; -webkit-box-orient:vertical; -moz-box-align: stretch;} 35 .top_fixed{height:50px; background:#ededed; color:#000;} 36 .quan{display:-moz-box; display:-webkit-box; -webkit-box-flex:1; -moz-box-flex:1; height:100%; -webkit-box-orient:vertical; -moz-box-orient:vertical;} 37 .quan .top{ 38 -moz-box-flex: 1; 39 -moz-box-orient: vertical; 40 display: -moz-box;} 41 </style> 42 <!-- 43 <div class="content"> 44 <div class="mi_one">這個是第一個內容哈煩得很發大水發生的.</div> 45 <div class="mi_two_con"> 46 <div class="mi_two">這個是第二個喲法國號開發fks金士頓規划是放寒假發酒瘋合法發哈放大回復阿警方</div> 47 <div class="mi_three"> 48 <div class="top_fixed">這個是頭部固定高度喲!!!</div> 49 <div class="top"> 50 <h4>這個是測試的標題</h4> 51 <div class="nav"> 52 <ul> 53 <li>這個是測試的列表選項</li> 54 <li>這個是測試的列表選項</li> 55 <li>這個是測試的列表選項</li> 56 <li>這個是測試的列表選項</li> 57 </ul> 58 </div> 59 <p>這個是擁有邊框的文字喲，順便來個圖片哇。</p> 60 <div class="img_div"><img src="img/ceshi.jpg" width="300px" height="200px"/></div> 61 <p>再來一段描述性的文字測試喲。哈哈~~~~</p> 62 </div> 63 <div class="fixed"> 64 <a href="#">確定</a> 65 <a href="#">取消</a> 66 </div> 67 </div> 68 <div style="clear:both;"></div> 69 </div> 70 </div>--> 71 <div class="quan"> 72 <div class="top_fixed">這個是頭部固定高度喲!!!</div> 73 <div class="top"> 74 <h4>這個是測試的標題</h4> 75 <div class="nav"> 76 <ul> 77 <li>這個是測試的列表選項</li> 78 <li>這個是測試的列表選項</li> 79 <li>這個是測試的列表選項</li> 80 <li>這個是測試的列表選項</li> 81 </ul> 82 </div> 83 <p>這個是擁有邊框的文字喲，順便來個圖片哇。</p> 84 <div class="img_div"><img src="img/ceshi.jpg" width="300px" height="200px"/></div> 85 <p>再來一段描述性的文字測試喲。哈哈~~~~</p> 86 </div> 87 <div class="fixed"> 88 <a href="#">確定</a> 89 <a href="#">取消</a> 90 </div> 91 </div> 92 </body> 93 </html>