我們來(lái)介紹一下Css3 彈性盒模型。Css3引入了新的盒子模型——彈性盒模型，該模型決定一個(gè)盒子在其他盒子中的分布方式以及如何處理可用的空間。這與XUL(火狐使用的用戶(hù)交互語(yǔ)言)相似，其它語(yǔ)言也使用相同的盒模型，如XAML 、GladeXML。

使用該模型，可以很輕松的創(chuàng)建自適應(yīng)瀏覽器窗口的流動(dòng)布局或自適應(yīng)字體大小的彈性布局。本文的例子使用以下的HTML代碼:

view sourceprint?

1.

2.??

1

3.??

2

4.??

3

5.

傳統(tǒng)的盒模型基于HTML流在垂直方向上排列盒子。使用彈性盒模型可以規(guī)定特定的順序，也可以反轉(zhuǎn)之。要開(kāi)啟彈性盒模型，只需設(shè)置擁有子盒子的盒子的display的屬性值為box(或inline-box)即可。

view sourceprint?

1.display: box;

水平或垂直分布

“box-orient”定義分布的坐標(biāo)軸：vertical和horizional。這兩個(gè)值定義盒子如何顯示，

view sourceprint?

1.body{

2.??display: box;

3.??box-orient: horizontal;

4.}

反向分布

“box-direction”可以設(shè)置盒子出現(xiàn)的順序。默認(rèn)情況下，只需定義分布坐標(biāo)軸——box隨html流分布。如果為水平坐標(biāo)軸，則從左到右分布；垂直坐標(biāo)軸則從上到下分布。定義“box-direction”的屬性值為“reverse”，則反轉(zhuǎn)盒子的排列順序。

view sourceprint?

1.body {

2.??display: box;

3.??box-orient: vertical;

4.??box-direction: reverse;

5.}

具體分布

屬性“box-ordinal-group”定義盒子分布的順序?？梢噪S意的控制其分布順序。這些組以一個(gè)從“1”開(kāi)始的數(shù)字定義，盒模型將首先分布這些組，所有這些盒子將在每個(gè)組中。分布將從小到大排列。

view sourceprint?

01.body {

02.??display: box;

03.??box-orient: vertical;

04.??box-direction : reverse;

05.}

06.#box1 {

07.??box-ordinal-group: 2;

08.}

09.#box2 {

10.??box-ordinal-group: 2;

11.}

12.#box3 {

13.??box-ordinal-group: 1;

14.}

盒子尺寸

默認(rèn)情況下，盒子并不具有彈性，如果box-flex的屬性值至少為1時(shí)，則變得富有彈性。

如果盒子不具有彈性，它將盡可能的寬使其內(nèi)容可見(jiàn)，且沒(méi)有任何溢出，其大小由“width”和“height”來(lái)決定(或min-height、min-width、max-width、max-height)。

如果盒子是彈性的，其大小將按下面的方式計(jì)算：具體的大小聲明(width、height、min-width、min-height、max-width、max-height)；

父盒子的大小和所有余下的可利用的內(nèi)部空間

如果盒子沒(méi)有任何大小聲明，那么其大小將完全取決于父box的大小。即：盒子的大小等于父級(jí)盒子的大小乘以其box-flex在所有子盒子box-flex總和中的百分比(子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和)。

如果一個(gè)或更多的盒子有一個(gè)具體的大小聲明，那么其大小將計(jì)算其中，余下的彈性盒子將按照上面的原則分享剩下的可利用空間。

看看下面的例子，理解起來(lái)更容易。

所有盒子都是彈性的

下面的例子中，box1的大小為box2的兩倍，box2與box3大小一樣?？雌饋?lái)好像是用百分比定義盒子的大小，但是有一個(gè)區(qū)別：使用彈性盒模型，增加一個(gè)盒子，無(wú)須重新計(jì)算其大小。

view sourceprint?

01.body {

02.??display: box;

03.??box-orient: horizontal;

04.}

05.#box1 {

06.??box-flex: 2;

07.}

08.#box2 {

09.??box-flex: 1;

10.}

11.#box3 {

12.??box-flex: 1;

13.}

一些盒子有固定大小

下面的例子中，box3并不是彈性的，寬度為160px；這樣box1和box2將有240px的可利用空間。因此，box1的寬度為160px(240*2/3)，box2的寬度為80px(240*1/3)。

view sourceprint?

01.body {

02.??display: box;

03.??box-orient: horizontal;

04.??width: 400px;

05.}

06.#box1 {

07.??box-flex: 2;

08.}

09.#box2 {

10.??box-flex: 1;

11.}

12.#box3 {

13.??width: 160px;

14.}

溢出管理

因?yàn)槭菑椥院凶印⒎菑椥院凶踊炫?#xff0c;有可能所有盒子的尺寸大于或小于父盒子的尺寸。這樣就有可能空間太多或空間不足。

空間太多如何處理

可利用空間的分布取決于兩個(gè)屬性值：box-align 和 box-pack。

屬性“box-pack”管理水平方向上的空間分布，有以下四個(gè)可能屬性：start、end、 justify、 or center。start 所有盒子在父盒子的左側(cè)，余下的空間在右側(cè)；

end所有盒子在父盒子的右側(cè)，余下的空間在左側(cè)；

justify 余下的空間在盒子間平均分配；

center 可利用的空間在父盒子的兩側(cè)平均分配。

屬性“box- align”管理垂直方向上的空間分布，有以下五個(gè)可能屬性之：start、 end,、center、 baseline和 stretch。

start 每個(gè)盒子沿父盒子的上邊緣排列，余下的空間位于底部；

end 每個(gè)盒子沿父盒子的下邊緣排列，余下的空間位于頂部；

center 可用空間平均分配，上面一半，下面一半；

baseline 所有盒子沿著它們的基線(xiàn)排列，余下的空間可前可后；

stretch 每個(gè)盒子的高度調(diào)整到適合父盒子的高度

view sourceprint?

01.body {

02.??display: box;

03.??box-orient: horizontal;

04.??/* The content of the body is horizontally centered */

05.??box-pack: center;

06.??/* and vertically as well ... o/ */

07.??box-align: center;

08.??width: 100%;

09.??height : 100%;

10.}

空間不足怎么辦

與傳統(tǒng)的盒模型一樣，overflow屬性用來(lái)決定其顯示方式。為了避免溢出，你可以設(shè)置box-lines為multiple使其換行顯示。

彈性盒模型看起來(lái)很不錯(cuò)，Gecko 和?WebKit對(duì)該模型都有一些嘗試性的測(cè)試。在這些屬性之前加上-moz和-webkit即可使用該屬性。也即是說(shuō)，firefox、safari、chrome可以使用這些特性。作為前端開(kāi)發(fā)者來(lái)說(shuō)，該模型對(duì)我們解決網(wǎng)頁(yè)設(shè)計(jì)中一些常見(jiàn)的問(wèn)題非常方便，如：表單布局、垂直居中、視覺(jué)上分離html流，等等。不就的將來(lái)它將成為一個(gè)web標(biāo)準(zhǔn)，早早熟悉它不是什么壞事。

總結(jié)

以上是生活随笔為你收集整理的html弹性盒模型,Css3 弹性盒模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。