這篇文章主要介紹了css3的彈性盒子模型實例分析的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇css3的彈性盒子模型實例分析文章都會有所收獲，下面我們一起來看看吧。

10年積累的網站設計制作、成都做網站經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站策劃后付款的網站建設流程，更有臨縣免費網站建設讓你可以放心的選擇與我們合作。

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

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

語法：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;}

結果： 圖片

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

示例：

.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}

結果： 圖片

2.box-orient

用來確定子元素的方向，是橫著還是豎著。

可選值：horizontal | vertical | inline-axis | box-axis | inherit?inline-axis是默認的 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}

結果：如圖

3.box-direction

用來確定子元素的排列順序?？蛇x值：

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

從前到后,revers表示反轉。

示例：

.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}

結果： 如圖

4.box-align與box-pack

決定盒子內部剩余空間怎么使用，行為效果為對齊方式。

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

box-align 可選參數： start | end | center | baseline | stretch

stretch為默認父標簽的高度有多高，子元素就有多高。start表示底邊對齊

end 為底部對齊，center居中對齊，baseline 基線對齊。

示例：

.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}

結果：如圖

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

start為默認值， justify表示兩端對齊。

示例：

.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}

結果：如圖

5.box-lines

用來決定子元素是否可以換行顯示，有兩個可以選的值：single | mutiple

single 默認值，不換行。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}

結果：如圖

6.box-ordinal-group

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

示例：

.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}

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

當前標題：css3的彈性盒子模型實例分析
文章出自：http://m.rwnh.cn/article14/jcgjge.html

成都網站建設公司_創(chuàng)新互聯，為您提供ChatGPT、網站設計公司、靜態(tài)網站、動態(tài)網站、自適應網站、小程序開發(fā)

廣告

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