盒子尺寸
默認(rèn)情況下,盒子并不具有彈性,如果box-flex的屬性值至少為1時(shí),則變得富有彈性。
如果盒子不具有彈性,它將盡可能的寬使其內(nèi)容可見,且沒有任何溢出,其大小由“width”和“height”來決定(或min-height、min-width、max-width、max-height)。
如果盒子是彈性的,其大小將按下面的方式計(jì)算:
- 具體的大小聲明(width、height、min-width、min-height、max-width、max-height);
- 父盒子的大小和所有余下的可利用的內(nèi)部空間
如果盒子沒有任何大小聲明,那么其大小將完全取決于父box的大小。即:盒子的大小等于父級盒子的大小乘以其box-flex在所有子盒子box-flex總和中的百分比(子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和)。
如果一個(gè)或更多的盒子有一個(gè)具體的大小聲明,那么其大小將計(jì)算其中,余下的彈性盒子將按照上面的原則分享剩下的可利用空間。
看看下面的例子,理解起來更容易。
所有盒子都是彈性的
下面的例子中,box1的大小為box2的兩倍,box2與box3大小一樣?雌饋砗孟袷怯冒俜直榷x盒子的大小,但是有一個(gè)區(qū)別:使用彈性盒模型,增加一個(gè)盒子,無須重新計(jì)算其大小。
body { display: box; box-orient: horizontal; } #box1 { box-flex: 2; } #box2 { box-flex: 1; } #box3 { box-flex: 1; }
一些盒子有固定大小
下面的例子中,box3并不是彈性的,寬度為160px;這樣box1和box2將有240px的可利用空間。因此,box1的寬度為160px(240*2/3),box2的寬度為80px(240*1/3)。
body { display: box; box-orient: horizontal; width: 400px; } #box1 { box-flex: 2; } #box2 { box-flex: 1; } #box3 { width: 160px; }
溢出管理
因?yàn)槭菑椥院凶、非彈性盒子混排,有可能所有盒子的尺寸大于或小于父盒子的尺寸。這樣就有可能空間太多或空間不足。
空間太多如何處理
可利用空間的分布取決于兩個(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 所有盒子沿著它們的基線排列,余下的空間可前可后;
- stretch 每個(gè)盒子的高度調(diào)整到適合父盒子的高度
body { display: box; box-orient: horizontal; width: 400px; } #box1 { box-flex: 2; } #box2 { box-flex: 1; } #box3 { width: 160px; }
空間不足怎么辦
與傳統(tǒng)的盒模型一樣,overflow屬性用來決定其顯示方式。為了避免溢出,你可以設(shè)置box-lines為multiple使其換行顯示。
彈性盒模型看起來很不錯(cuò),Gecko 和 WebKit對該模型都有一些嘗試性的測試。在這些屬性之前加上-moz和-webkit即可使用該屬性。也即是說,firefox、safari、chrome可以使用這些特性,可以看看這個(gè)彈性盒模型的demo。
作為前端開發(fā)者來說,該模型對我們解決網(wǎng)頁設(shè)計(jì)中一些常見的問題非常方便,如:表單布局、垂直居中、視覺上分離html流,等等。不就的將來它將成為一個(gè)web標(biāo)準(zhǔn),早早熟悉它不是什么壞事。
更多參考
Shawn J. Goff: CSS3 Flexible Box Layout Module
CSS3.info: Introducing the flexible box layout module
W3C: Flexible Box Layout Module
原文地址:http://www.denisdeng.com/?p=938 轉(zhuǎn)載地址:http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
本文鏈接:http://m.95time.cn/tech/web/2010/7565.asp
出處:
責(zé)任編輯:bluehearts
上一頁 css3彈性盒模型 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。
|