css3彈性盒模型

1、簡介

css3引入了新的盒模型——彈性盒模型，該模型決定一個盒子在其餘盒子中的分佈方式以及如何處理可用的空間。使用該模型，能夠很輕鬆的建立自適應瀏覽器窗口的流動佈局或自適應字體大小的彈性佈局。

目前box屬性尚未獲得firefox、chrome瀏覽器的徹底支持，但可使用它們的私有屬性定義firefox(-moz-)、chrome/safari（-webkit-)。因此徹底能夠在手機端的webview頁面中採起這樣的佈局。

2、彈性盒模型

默認狀況下，盒子並不具備彈性，若是box-flex的屬性值至少爲1時，則變得富有彈性。若是盒子不具備彈性，它將盡量的寬使其內容可見，且沒有任何溢出，其大小由「width」和「height」來決定（或min-height、min-width、max-width、max-height）。

彈性盒模型使用細則：

1.必須給父容器定義display: box，其子元素才能夠進行劃分。

若是給class爲p1的子元素設置box-flex設置爲3，給class爲p2的子元素設置box-flex爲1，給class爲p3的子元素設置box-flex爲1，說明分別給其設置3等分和1等分和1等分。

即給class爲p1的子元素設置寬度爲100%*3/5=60%；給class爲p2的子元素設置寬度爲100%*1/5=20%；給class爲p3的子元素設置寬度爲100%*1/5=20%;

2.若是進行父容器劃分的同時，他的子元素有的設置了固定寬度，有的要進行劃分的話，那麼劃分的寬度 = 父容器的寬度 – 已經設置的固定寬度 。再進行對應的劃分。

3、box屬性

具體的屬性有：box-orient | box-direction | box-align | box-pack | box-lines

一、box-orient

經常使用的幾個屬性值是：horizontal | vertical | inherit

horizontal：子元素水平排列；vertical：子元素豎直排列；inherit：子元素豎直排列而且讓子元素繼承父元素的相關屬性。

二、box-direction

經常使用的兩個屬性值是：normal | reverse

normal是默認值，按照HTML文檔裏的結構的前後順序依次展現；reverse表示反轉。

三、box-align

box-align 表示父容器裏面子容器的垂直對齊方式，可選參數以下表示：start | end | center | baseline | stretch。

四、box-pack

box-pack 表示父容器裏面子容器的水平對齊方式，可選參數以下表示：start | end | center | justify。

4、經常使用demo

一、html

1 <div class="wrap">
2     <div class="box1">hello box1</div>
3     <div class="box2">hello box2</div>
4     <div class="box3">hello box3</div>
5 </div>

View Code

二、demo1--style--水平排列

 1 .wrap{
 2     height:60px;
 3     display:-moz-box;
 4     display:-webkit-box;
 5     -moz-box-orient:horizontal;
 6     -webkit-box-orient:horizontal;
 7 /*    -moz-box-direction:reverse;
 8     -webkit-box-direction:reverse;*/
 9 }
10 .box1{background:orange;}
11 .box2{background:#ccc;}
12 .box3{background:green;}

View Code

三、demo1--style--inherit

 1 .wrap{
 2     height:60px;
 3     display:-moz-box;
 4     display:-webkit-box;
 5     -moz-box-orient:inherit;
 6     -webkit-box-orient:inherit;
 7 }
 8 .box1{background:orange;}
 9 .box2{background:#ccc;}
10 .box3{background:green;}

View Code

四、demo1--style--具體分佈順序

 1 .wrap{
 2     display:-moz-box;
 3     display:-webkit-box;
 4     -moz-box-orient:vertical;
 5     -webkit-box-orient:vertical;
 6 }
 7 .box1{
 8     height:60px;
 9     background:orange;
10     -moz-box-ordinal-group:2;
11     -webkit-box-ordinal-group:2;
12 }
13 .box2{
14     height:60px;
15     background:#ccc;
16     -moz-box-ordinal-group:3;
17     -webkit-box-ordinal-group:3;
18 }
19 .box3{
20     height:60px;
21     background:green;
22     -moz-box-ordinal-group:1;
23     -webkit-box-ordinal-group:1;
24 }

View Code

五、demo1--style--彈性盒子

 1 .wrap{
 2     display:-moz-box;
 3     display:-webkit-box;
 4     -moz-box-orient:horizontal;
 5     -webkit-box-orient:horizontal;
 6 }
 7 .box1{
 8     height:60px;
 9     background:orange;
10     -moz-box-flex:3;
11     -webkit-box-flex:3;
12 }
13 .box2{
14     height:60px;
15     background:#ccc;
16     -moz-box-flex:1;
17     -webkit-box-flex:1;
18 }
19 .box3{
20     height:60px;
21     background:green;
22     -moz-box-flex:1;
23     -webkit-box-flex:1;
24 }

View Code

六、demo1--style--inherit+彈性盒子

 1 .wrap{
 2     height:60px;
 3     display:-moz-box;
 4     display:-webkit-box;
 5     -moz-box-orient:inherit;
 6     -webkit-box-orient:inherit;
 7 }
 8 .box1{
 9     background:orange;
10     -moz-box-flex:3;
11     -webkit-box-flex:3;
12 }
13 .box2{
14     background:#ccc;
15     -moz-box-flex:1;
16     -webkit-box-flex:1;
17 }
18 .box3{
19     background:green;
20     -moz-box-flex:1;
21     -webkit-box-flex:1;
22 }

View Code

七、demo1--style--彈性盒子與固有寬度混用

 1 .wrap{
 2     display:-moz-box;
 3     display:-webkit-box;
 4     -moz-box-orient:horizontal;
 5     -webkit-box-orient:horizontal;
 6 }
 7 .box1{
 8     height:60px;
 9     background:orange;
10     -moz-box-flex:2;
11     -webkit-box-flex:2;
12 }
13 .box2{
14     height:60px;
15     background:#ccc;
16     -moz-box-flex:1;
17     -webkit-box-flex:1;
18 }
19 .box3{
20     height:60px;
21     background:green;
22     width:80px;
23 }

View Code

 

5、總結自適應頁面佈局

bootstrap柵格佈局 - 彈性盒模型 - table佈局(display:table-cell;)

 

6、彈性盒子(新)

一、簡介：
彈性盒子(舊)：display:box; 彈性盒子(新)：display:flex; 下面介紹的就是新的彈性盒子：
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。彈性容器經過設置 display 屬性的值爲 flex 或 inline-flex 將其定義爲彈性容器。彈性容器內包含了一個或多個彈性子元素。彈性子元素一般在彈性盒子內一行顯示。默認狀況每一個容器只有一行。

二、在彈性盒子中經常使用到的屬性：

(1)flex-direction - 指定了彈性容器中子元素的排列方式。它的屬性值以下：

row：橫向從左到右排列(左對齊)，默認的排列方式；row-reverse：反轉橫向排列(右對齊)，從後往前排，最後一項排在最前面。
column：縱向排列；column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

(2)justify-content - 設置彈性盒子元素在主軸（橫軸）方向上的對齊方式。它的屬性值以下：

flex-start：彈性項目向行頭緊挨着填充。(默認值)
flex-end：彈性項目向行尾緊挨着填充。
center：彈性項目居中緊挨着填充。
space-between：彈性項目平均分佈在該行上。
space-around：彈性項目平均分佈在該行上，兩邊留有一半的間隔空間。

(3)align-items - 設置彈性盒子元素在側軸（縱軸）方向上的對齊方式。它的屬性值以下：

flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。
baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。(默認值)

(4)flex-wrap - 用於指定彈性盒子的子元素換行方式。它的屬性值以下：

nowrap：默認，彈性容器爲單行。該狀況下彈性子項可能會溢出容器。
wrap：彈性容器爲多行。該狀況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行。
wrap-reverse：反轉 wrap 排列。

(5)align-content - 用於修改 flex-wrap 屬性的行爲，相似 align-items, 但不是設置子元素對齊，而是設置行對齊。它的屬性值以下：

stretch：默認，各行將會伸展以佔用剩餘的空間。
flex-start：各行向彈性盒容器的起始位置堆疊。
flex-end：各行向彈性盒容器的結束位置堆疊。
center：各行向彈性盒容器的中間位置堆疊。
space-between：各行在彈性盒容器中平均分佈。
space-around：各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。

(6)order - 設置彈性盒子的子元素排列順序。用整數值來定義排列順序，數值小的排在前面。能夠爲負值。

(7)align-self - 在彈性子元素上使用。覆蓋容器的 align-items 屬性。

auto：其計算值爲元素的父元素的'align-items'值，若是其沒有父元素，則計算值爲'stretch'。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。
baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。

(8)flex - 設置彈性盒子的子元素如何分配空間。

 

網上參考：

http://www.runoob.com/css3/css3-flexbox.html