本文為大家繼續分享CSS3彈性盒模型開發筆記第二篇，之前一篇以及為大家引入了CSS3彈性盒模型的相關介紹，點擊查看：CSS3彈性盒模型開發筆記（一）
box-flex屬性
box-flex屬效能夠靈活地控制子項目在盒子中的顯示空間。注意，顯示空間包括子項目的寬度和高度，而不只是子項目所在欄目的寬度，也可以說是子項目在盒子中所佔的面積。該屬性在彈性布局中非常重要，它解決了傳統設計中習慣使用百分比定義彈性布局的弊端。box-flex屬性的基本文法：
box-flex:<number>
取值說明：
<number>屬性值是一個整數或者小數。當盒子中包含多個定義了box-flex屬性的子項目時，瀏覽器將會把這些子項目的box-flex屬性值相加，然後根據他們各自的值佔總值的比例來分配盒子剩餘的空間。注意，box-flex屬性只有在盒子擁有的確定的空間大小之後才能正確解析。在設計中，較穩妥的做法是為了盒子定義具體的width或height屬性值。
實戰體驗：自適應欄目寬度設計
在傳統的網頁設計中，如果要把一個欄目分成三欄，比較簡單的做法是把三個子項目的寬度都設定為33.3%。這種做法無法把父元素的寬度完全填充，當父元素的寬度足夠大的時候，使用者會看到未填充的空白地區。但是，如果為子項目設定了固定寬度值，彈性布局會變得更為複雜。如果使用box-flex屬性，這個問題就會迎刃而解。
html代碼：
<body><h1><img src="images/web3_13.gif" /></h1><p id="box"> <!--左側欄目--> <p id="box1"><img src="images/web3_01.gif" /></p> <!--中間欄目--> <p id="box2"> <h2><img src="images/web3_02.gif" /></h2> <p><img src="images/web3_04.gif" /></p> <p><img src="images/web3_05.gif" /></p> <p><img src="images/web3_06.gif" /></p> <p><img src="images/web3_07.gif" /></p> </p> <!--右側欄目--> <p id="box3"> <h2><img src="images/web3_12.gif" /></h2> <p><img src="images/web3_08.gif" /></p> <p><img src="images/web3_09.gif" /></p> <p><img src="images/web3_10.gif" /></p> <p><img src="images/web3_11.gif" /></p> </p></p></body>
CSS3代碼：
/*這是一個三欄布局的頁面，其中左側欄目的寬度是固定的，而中間和右側欄目的寬度是彈性的*/<style> body{ margin:0; padding:0; text-align:center; } h1,h2{margin:2px;} #box{ margin:auto; text-align:left; width:1002px; overflow:hidden; } /*定義box元素盒形顯示，並設定子項目水平布置*/#box{ display:box; display:-moz-box; display:-webkit-box; box-orient:horizontal; -moz-box-orient:horizontal; -webkit-box-orient:horizontal; } /*定義盒子左側欄目的寬度為固定顯示*/#box1{width:201px;} #box2,#box3{ border:1px solid #CCC; margin:2px; } /*定義盒子內中間欄目的寬度為盒子剩餘空間的2/3*/#box2{ box-flex: 4; -moz-box-flex: 4; -webkit-box-flex: 4; } /*定義盒子內中間欄目的寬度為盒子剩餘空間的1/3*/#box3{ box-flex:2; -moz-box-flex:2; -webkit-box-flex:2; } #box2 p,#box3 p{ display:inline; } </style>
示範效果：
彈性空間的實現和分配
在預設情況下，子項目並不具有彈性，它會竟可能的寬，以便使其所包含的內容可見，並且不會有任何溢出。如果要改變它的尺寸，則可以使用width和height屬性來實現，當然也可以使用min-height，min-width，max-height,max-width等屬性來限制尺寸。
當box-flex屬性至少大於0時，它會變得富有彈性。當子項目具有彈性時，可以通過下面的方式來改變它的尺寸：
1、使用width，height，min-height，min-width，max-height,max-width等屬性來定義尺寸。
2、使用盒子的尺寸來限制子項目的彈性尺寸。
3、藉助盒子富餘所有空間來限制元素的彈性尺寸。
如果子項目沒有聲明大小，那麼其尺寸將完全取決於盒子的大小，即子項目的大小等於盒子的大小乘以它的box-flex屬性值在所有子項目的box-flex屬性值總和中的百分比。使用公式表示如下：
子項目的尺寸=盒子的尺寸*子項目的box-flex屬性值/所有子項目的box-flex屬性值的和
如果一個或多個子項目聲明了具體的尺寸，那麼其大小將計入其中，餘下的彈性盒子將按照上面的原則分享剩餘的可利用空間。
由於受內部圖片大小的支撐，導致子項目的空間總是大於盒子的 富餘空間，這時將出現解析異常。
box-flex屬性對子項目的布局影響
HTML代碼：
<body><h1><img src="images/web3_13.gif" /></h1><p id="box"> <!--左側欄目--> <p id="box1"><img src="images/web3_01.gif" /></p> <!--中間欄目--> <p id="box2"></p> <!--右側欄目--> <p id="box3"></p></p></body>
中間和右側各佔一半剩餘的空間
CSS3代碼：
#box2{ box-flex: 2; -moz-box-flex: 2; -webkit-box-flex: 2; background:#CCF; } #box3{ box-flex: 2; -moz-box-flex: 2; -webkit-box-flex: 2; background:#FC0; }
示範效果：
中欄佔1/5的空餘空間，右欄佔4/5空餘的空間
CSS3代碼：
#box2{ box-flex: 0.5; -moz-box-flex: 0.5; -webkit-box-flex: 0.5; background:#CCF; } #box3{ box-flex: 2; -moz-box-flex: 2; -webkit-box-flex: 2; background:#FC0; }
示範效果：
中間彈性顯示，佔據所有空餘空間，右欄固定大
CSS3代碼：
#box2{ box-flex: 0.5; -moz-box-flex: 0.5; -webkit-box-flex: 0.5; background:#CCF; } #box3{ width:196px; background:url(images/web3_03.gif) no-repeat; }
示範效果：
中欄失去彈性（當設定為0或者複製時），收縮顯示為一條線，右欄自動左移
CSS代碼：
#box2{ box-flex: 0; -moz-box-flex: 0; -webkit-box-flex: 0; background:#CCF; } #box3{ width:196px; background:url(images/web3_03.gif) no-repeat; }
示範效果：
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
