溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS3彈性盒模型怎么開發，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
box-flex屬性
box-flex屬性能夠靈活地控制子元素在盒子中的顯示空間。注意，顯示空間包括子元素的寬度和高度，而不只是子元素所在欄目的寬度，也可以說是子元素在盒子中所占的面積。該屬性在彈性布局中非常重要，它解決了傳統設計中習慣使用百分比定義彈性布局的弊端。box-flex屬性的基本語法：
box-flex:<number>
取值說明：
<number>屬性值是一個整數或者小數。當盒子中包含多個定義了box-flex屬性的子元素時，瀏覽器將會把這些子元素的box-flex屬性值相加，然后根據他們各自的值占總值的比例來分配盒子剩余的空間。注意，box-flex屬性只有在盒子擁有的確定的空間大小之后才能正確解析。在設計中，較穩妥的做法是為了盒子定義具體的width或height屬性值。
實戰體驗：自適應欄目寬度設計
在傳統的網頁設計中，如果要把一個欄目分成三欄，比較簡單的做法是把三個子元素的寬度都設置為33.3%。這種做法無法把父元素的寬度完全填充，當父元素的寬度足夠大的時候，用戶會看到未填充的空白區域。但是，如果為子元素設置了固定寬度值，彈性布局會變得更為復雜。如果使用box-flex屬性，這個問題就會迎刃而解。
html代碼：
XML/HTML Code復制內容到剪貼板
<body> <h2><img src="images/web3_13.gif" /></h2> <div id="box"> <!--左側欄目--> <div id="box1"><img src="images/web3_01.gif" /></div> <!--中間欄目--> <div id="box2"> <h3><img src="images/web3_02.gif" /></h3> <div><img src="images/web3_04.gif" /></div> <div><img src="images/web3_05.gif" /></div> <div><img src="images/web3_06.gif" /></div> <div><img src="images/web3_07.gif" /></div> </div> <!--右側欄目--> <div id="box3"> <h3><img src="images/web3_12.gif" /></h3> <div><img src="images/web3_08.gif" /></div> <div><img src="images/web3_09.gif" /></div> <div><img src="images/web3_10.gif" /></div> <div><img src="images/web3_11.gif" /></div> </div> </div> </body>
CSS3代碼：
CSS Code復制內容到剪貼板
/*這是一個三欄布局的頁面，其中左側欄目的寬度是固定的，而中間和右側欄目的寬度是彈性的*/
<style>
body{
margin:0;
padding:0;
text-align:center;
}
h2,h3{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 div,#box3 div{
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代碼：
XML/HTML Code復制內容到剪貼板
<body> <h2><img src="images/web3_13.gif" /></h2> <div id="box"> <!--左側欄目--> <div id="box1"><img src="images/web3_01.gif" /></div> <!--中間欄目--> <div id="box2"></div> <!--右側欄目--> <div id="box3"></div> </div> </body>
中間和右側各占一半剩余的空間
CSS3代碼：
CSS Code復制內容到剪貼板
#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代碼：
CSS Code復制內容到剪貼板
#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代碼：
CSS Code復制內容到剪貼板
#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代碼：
CSS Code復制內容到剪貼板
#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;
}演示效果：
看完上述內容，你們掌握CSS3彈性盒模型怎么開發的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
