溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
CSS3彈性盒模型怎么開發(fā)，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。
box-flex屬性
box-flex屬性能夠靈活地控制子元素在盒子中的顯示空間。注意，顯示空間包括子元素的寬度和高度，而不只是子元素所在欄目的寬度，也可以說是子元素在盒子中所占的面積。該屬性在彈性布局中非常重要，它解決了傳統(tǒng)設(shè)計(jì)中習(xí)慣使用百分比定義彈性布局的弊端。box-flex屬性的基本語法：
box-flex:<number>
取值說明：
<number>屬性值是一個(gè)整數(shù)或者小數(shù)。當(dāng)盒子中包含多個(gè)定義了box-flex屬性的子元素時(shí)，瀏覽器將會(huì)把這些子元素的box-flex屬性值相加，然后根據(jù)他們各自的值占總值的比例來分配盒子剩余的空間。注意，box-flex屬性只有在盒子擁有的確定的空間大小之后才能正確解析。在設(shè)計(jì)中，較穩(wěn)妥的做法是為了盒子定義具體的width或height屬性值。
實(shí)戰(zhàn)體驗(yàn)：自適應(yīng)欄目寬度設(shè)計(jì)
在傳統(tǒng)的網(wǎng)頁設(shè)計(jì)中，如果要把一個(gè)欄目分成三欄，比較簡單的做法是把三個(gè)子元素的寬度都設(shè)置為33.3%。這種做法無法把父元素的寬度完全填充，當(dāng)父元素的寬度足夠大的時(shí)候，用戶會(huì)看到未填充的空白區(qū)域。但是，如果為子元素設(shè)置了固定寬度值，彈性布局會(huì)變得更為復(fù)雜。如果使用box-flex屬性，這個(gè)問題就會(huì)迎刃而解。
html代碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<body> <h2><img src="images/web3_13.gif" /></h2> <div id="box"> <!--左側(cè)欄目--> <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> <!--右側(cè)欄目--> <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復(fù)制內(nèi)容到剪貼板
/*這是一個(gè)三欄布局的頁面，其中左側(cè)欄目的寬度是固定的，而中間和右側(cè)欄目的寬度是彈性的*/
<style>
body{
margin:0;
padding:0;
text-align:center;
}
h2,h3{margin:2px;}
#box{
margin:auto;
text-align:left;
width:1002px;
overflow:hidden;
}
/*定義box元素盒形顯示，并設(shè)置子元素水平布置*/
#box{
display:box;
display:-moz-box;
display:-webkit-box;
box-orient:horizontal;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
}
/*定義盒子左側(cè)欄目的寬度為固定顯示*/
#box1{width:201px;}
#box2,#box3{
border:1px solid #CCC;
margin:2px;
}
/*定義盒子內(nèi)中間欄目的寬度為盒子剩余空間的2/3*/
#box2{
box-flex: 4;
-moz-box-flex: 4;
-webkit-box-flex: 4;
}
/*定義盒子內(nèi)中間欄目的寬度為盒子剩余空間的1/3*/
#box3{
box-flex:2;
-moz-box-flex:2;
-webkit-box-flex:2;
}
#box2 div,#box3 div{
display:inline;
}
</style>演示效果：
彈性空間的實(shí)現(xiàn)和分配
  在默認(rèn)情況下，子元素并不具有彈性，它會(huì)竟可能的寬，以便使其所包含的內(nèi)容可見，并且不會(huì)有任何溢出。如果要改變它的尺寸，則可以使用width和height屬性來實(shí)現(xiàn)，當(dāng)然也可以使用min-height，min-width，max-height,max-width等屬性來限制尺寸。
  當(dāng)box-flex屬性至少大于0時(shí)，它會(huì)變得富有彈性。當(dāng)子元素具有彈性時(shí)，可以通過下面的方式來改變它的尺寸：
1、使用width，height，min-height，min-width，max-height,max-width等屬性來定義尺寸。
2、使用盒子的尺寸來限制子元素的彈性尺寸。
3、借助盒子富余所有空間來限制元素的彈性尺寸。
  如果子元素沒有聲明大小，那么其尺寸將完全取決于盒子的大小，即子元素的大小等于盒子的大小乘以它的box-flex屬性值在所有子元素的box-flex屬性值總和中的百分比。使用公式表示如下：
子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值/所有子元素的box-flex屬性值的和
如果一個(gè)或多個(gè)子元素聲明了具體的尺寸，那么其大小將計(jì)入其中，余下的彈性盒子將按照上面的原則分享剩余的可利用空間。
由于受內(nèi)部圖片大小的支撐，導(dǎo)致子元素的空間總是大于盒子的 富余空間，這時(shí)將出現(xiàn)解析異常。
box-flex屬性對子元素的布局影響
HTML代碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<body> <h2><img src="images/web3_13.gif" /></h2> <div id="box"> <!--左側(cè)欄目--> <div id="box1"><img src="images/web3_01.gif" /></div> <!--中間欄目--> <div id="box2"></div> <!--右側(cè)欄目--> <div id="box3"></div> </div> </body>
中間和右側(cè)各占一半剩余的空間
CSS3代碼：
CSS Code復(fù)制內(nèi)容到剪貼板
#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復(fù)制內(nèi)容到剪貼板
#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;
}演示效果：
中間彈性顯示，占據(jù)所有空余空間，右欄固定大
CSS3代碼：
CSS Code復(fù)制內(nèi)容到剪貼板
#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;
}演示效果：
中欄失去彈性（當(dāng)設(shè)置為0或者復(fù)制時(shí)），收縮顯示為一條線，右欄自動(dòng)左移
CSS代碼：
CSS Code復(fù)制內(nèi)容到剪貼板
#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;
}演示效果：
看完上述內(nèi)容，你們掌握CSS3彈性盒模型怎么開發(fā)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼