中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

盒子尺寸

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

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

如果盒子是彈性的，其大小將按下面的方式計(jì)算：

1. 具體的大小聲明（width、height、min-width、min-height、max-width、max-height）；
2. 父盒子的大小和所有余下的可利用的內(nèi)部空間

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

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

看看下面的例子，理解起來更容易。

所有盒子都是彈性的

下面的例子中，box1的大小為box2的兩倍，box2與box3大小一樣�？雌饋砗孟袷怯冒俜直榷�義盒子的大小，但是有一個(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。

1. start 所有盒子在父盒子的左側(cè)，余下的空間在右側(cè)；
2. end所有盒子在父盒子的右側(cè)，余下的空間在左側(cè)；
3. justify 余下的空間在盒子間平均分配；
4. center 可利用的空間在父盒子的兩側(cè)平均分配。

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

1. start 每個(gè)盒子沿父盒子的上邊緣排列，余下的空間位于底部；
2. end 每個(gè)盒子沿父盒子的下邊緣排列，余下的空間位于頂部；
3. center 可用空間平均分配，上面一半，下面一半；
4. baseline 所有盒子沿著它們的基線排列，余下的空間可前可后；
5. 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)，早早熟悉它不是什么壞事。

更多參考

本文鏈接：http://www.95time.cn/tech/web/2010/7565.asp　

出處：
責(zé)任編輯：bluehearts

上一頁 css3彈性盒模型 [1] 下一頁

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。