css3的彈性盒子模型實(shí)例分析

這篇文章主要介紹了css3的彈性盒子模型實(shí)例分析的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇css3的彈性盒子模型實(shí)例分析文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

10年積累的網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有臨縣免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

1.box-flex屬性規(guī)定框的子元素是否可伸縮其尺寸。

父元素必須要聲明display:box;子元素才可以用box-flex。

語(yǔ)法：box-flex:value;

示例：

.test_box {display: -moz-box;display: -webkit-box;display:box;width: 800px;margin: 40px auto;padding: 20px;

background: #f0f3f9;}

.list {padding: 0 1em; font: bold 36px/200px monaco;text-shadow: 1px 1px #eee;}

.list_one { -moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background-color: yellow;}

.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background-color: #99CC00;}

.list_three {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background-color: paleturquoise;}

結(jié)果：圖片

可以指定某個(gè)子元素的寬度，剩下的部分平分。

示例：

.test_box {display: -moz-box;display: -webkit-box;display: box;width: 800px;margin: 40px auto;padding: 20px;

background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/200px monaco;

text-shadow: 1px 1px #eee;}

.list_one {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background: #00CC99;}

.list_two {-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background: #99FF00;}

.list_w300 { width: 300px; background: #CCCCFF}

結(jié)果：圖片

2.box-orient

用來(lái)確定子元素的方向，是橫著還是豎著。

可選值：horizontal | vertical | inline-axis | box-axis | inherit?inline-axis是默認(rèn)的 horizonta inline-axis 是一樣的讓元素橫著 vertical

box-axis 是一樣的讓元素縱列。

示例：

.test_box {width: 300px; margin: 0 auto;display: -moz-box;

display: -webkit-box;display: box;box-orient:horizontal;padding: 20px;background: #f0f3f9;}

.list{padding: 0 1em;font: bold 36px/120px monaco;?text-shadow: 1px 1px #eee;-webkit-box-flex: 1;}

.one{background: #99FF00;}

.two{background: #00CC99}

.three{background:#CCCC00}

結(jié)果：如圖

3.box-direction

用來(lái)確定子元素的排列順序。可選值：

onrmal | revers | inherit onrmal是默認(rèn)值按著正常順序排列，從左到右

從前到后,revers表示反轉(zhuǎn)。

示例：

.test_box {display: -moz-box;display: -webkit-box;display: box;-moz-box-direction:reverse;-webkit-box-direction:reverse;

box-direction:reverse;width: 300px;margin: 20px auto;padding: 10px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/150px monaco;text-shadow: 1px 1px #eee;}

.list_one {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background: yellow;}

.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background: #99CC00;}

.three{background: #CCCCFF}

結(jié)果：如圖

4.box-align與box-pack

決定盒子內(nèi)部剩余空間怎么使用，行為效果為對(duì)齊方式。

box-align 為垂直方向上的空間利用，box-pack 為水平方向上的空間利用。

box-align 可選參數(shù)： start | end | center | baseline | stretch

stretch為默認(rèn)父標(biāo)簽的高度有多高，子元素就有多高。start表示底邊對(duì)齊

end 為底部對(duì)齊，center居中對(duì)齊，baseline 基線對(duì)齊。

示例：

.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;

display: -o-box;display: box;-moz-box-align:end;

-webkit-box-align:end; -o-box-align:end; box-align:end;

width: 300px;height: 200px;padding: 20px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/120px monaco;text-shadow: 1px 1px #eee;}

.one{background: #99FF00;}

.two{background: #00CC99}

.three{background:#CCCC00}

結(jié)果：如圖

box-pack可選值： start | end | center | justify

start為默認(rèn)值， justify表示兩端對(duì)齊。

示例：

.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;

display: -o-box;display: box;-moz-box-pack:justify;

-webkit-box-pack:justify; -o-box-pack:justify; box-pack:justify;

width: 300px;height: 200px;padding: 20px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/120px monaco;

text-shadow: 1px 1px #eee;}

.one{background: #99FF00;}

.two{background: #00CC99}

.three{background:#CCCC00}

結(jié)果：如圖

5.box-lines

用來(lái)決定子元素是否可以換行顯示，有兩個(gè)可以選的值：single | mutiple

single 默認(rèn)值，不換行。mutiple 換行多行顯示。

示例：

.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;

display: -o-box;display: box;-moz-box-lines:multiple;

-webkit-box-lines:multiple;-o-box-lines:multiple;

box-lines:multiple; width: 300px;

height: 200px;padding: 20px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/120px monaco;text-shadow: 1px 1px #eee;}

.one{background: #99FF00;}

.two{background: #00CC99}

.three{background:#CCCC00}

結(jié)果：如圖

6.box-ordinal-group

改變子元素的順序，值為數(shù)字，數(shù)字越小越排在前面。

示例：

.test_box {display: -moz-box;display: -webkit-box;display: box;

width: 300px;margin: 40px auto;padding: 20px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/200px monaco;text-shadow: 1px 1px #eee;}

.list_one {-moz-box-flex: 1;-webkit-box-flex: 1; box-flex: 1;

-moz-box-ordinal-group: 1;-webkit-box-ordinal-group: 1;box-ordinal-group: 1;background: #99CC00;}

.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;-moz-box-ordinal-group: 2;-webkit-box-ordinal-group: 2;

box-ordinal-group: 2;background: #CC33CC;}

.three{ background: #CCCC00}

關(guān)于“css3的彈性盒子模型實(shí)例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“css3的彈性盒子模型實(shí)例分析”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前標(biāo)題：css3的彈性盒子模型實(shí)例分析
文章出自：http://muchs.cn/article14/jcgjge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站設(shè)計(jì)公司、靜態(tài)網(wǎng)站、動(dòng)態(tài)網(wǎng)站、自適應(yīng)網(wǎng)站、小程序開(kāi)發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容