《
Css3 弹性盒模型》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332002013.htm
view sourceprint? 1.body{ 2. display: box; 3. box-orient: horizontal; 4.}
水平或垂直分布
反向分布
具体分布
view sourceprint? 1.body { 2. display: box; 3. box-orient: vertical; 4. box-direction: reverse; 5.}
start 所有盒子在父盒子的左侧，余下的空间在右侧； end所有盒子在父盒子的右侧，余下的空间在左侧； justify 余下的空间在盒子间平均分配； center 可利用的空间在父盒子的两侧平均分配。
view sourceprint? 1.<body> 2. <div id="box1">1</div> 3. <div id="box2">2</div> 4. <div id="box3">3</div> 5.</body>
如果一个或更多的盒子有一个详细的大小申明，那么其大小将计算其中，余下的弹性盒子将依照上面的准则分享剩下的可应用空间。
--> [
网站建设之]Css3 弹性盒模型
下面的例子中，box3并不是弹性的，宽度为160px；这样box1和box2将有240px的可利用空间。因而，box1的宽度为160px(240*2/3)，box2的宽度为80px(240*1/3)。
一些盒子有固定大小
下面的例子中，box1的大小为box2的两倍，box2与box3大小一样。看起来似乎是用百分比定义盒子的大小，然而有一个差别：使用弹性盒模型，增添一个盒子，毋庸从新计算其大小。
属性“box- align”管理垂直方向上的空间分布，有以下五个可能属性之：start、 end,、center、 baseline跟 stretch。
我们来先容一下Css3 弹性盒模型。Css3引入了新的盒子模型——弹性盒模型，该模型决定一个盒子在其余盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）类似，其它语言也使用雷同的盒模型，如XAML 、GladeXML。
view sourceprint? 01.body { 02,
CSS3 VS CSS2大PK. display: box; 03. box-orient: horizontal,
CSS3 Transition属性详解; 04,
CSS3 target伪类简单介绍. width: 400px; 05.} 06.#box1 { 07. box-flex: 2; 08.} 09.#box2 { 10. box-flex: 1; 11.} 12.#box3 { 13. width: 160px; 14.}
空间不足怎么办
使用该模型，可以很轻松的创立自适应阅读器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码:
如果盒子没有任何大小声明，那么其大小将完整取决于父box的大小。即：盒子的大小即是父级盒子的大小乘以其box-flex在所有子盒子box-flex总和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和）。
“box-orient”定义分布的坐标轴：vertical和horizional。这两个值定义盒子如何显示，
如果盒子不存在弹性，它将尽可能的宽使其内容可见,CSS3 RGBA颜色类型不等于RGB与opacity相加，且不任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height）。
详细的大小声明（width、height、min-width、min-height、max-width、max-height）； 父盒子的大小和所有余下的可利用的内部空间
属性“box-pack”管理水平方向上的空间分布，有以下四个可能属性：start、end、 justify、 or center。
可利用空间的分布取决于两个属性值：box-align 和 box-pack。
传统的盒模型基于HTML流在垂直方向上排列盒子。应用弹性盒模型可以划定特定的顺序，也可以反转之。要开启弹性盒模型，只要设置领有子盒子的盒子的display的属性值为box（或inline-box）即可。
属性“box-ordinal-group”定义盒子分布的次序。能够随便的把持其分布顺序,CSS3 Media Queries详解。这些组以一个从“1”开端的数字定义，盒模型将首先散布这些组，所有这些盒子将在每个组中。分布将从小到大排列。
空间太多如何处置
所有盒子都是弹性的
start 每个盒子沿父盒子的上边沿排列，余下的空间位于底部； end 每个盒子沿父盒子的下边缘排列，余下的空间位于顶部； center 可用空间均匀调配，上面一半，下面一半； baseline 所有盒子沿着它们的基线排列，余下的空间可前可后； stretch 每个盒子的高度调剂到合适父盒子的高度 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.}
溢出治理
由于是弹性盒子、非弹性盒子混排，有可能所有盒子的尺寸大于或小于父盒子的尺寸。这样就有可能空间太多或空间不足。
view sourceprint? 1.display: box;
假如盒子是弹性的，其大小将按下面的方法盘算：
看看下面的例子，懂得起来更轻易。
Tag：CSS3 弹性盒模型 CSS3 弹性盒模型
view sourceprint? 01.body { 02. display: box; 03. box-orient: vertical; 04,
CSS3 Gradient 创建水晶按钮实例. box-direction : reverse; 05.} 06.#box1 { 07. box-ordinal-group: 2; 08.} 09.#box2 { 10. box-ordinal-group: 2; 11.} 12.#box3 { 13,
css3 border-image使用说明. box-ordinal-group: 1; 14.}
“box-direction”可以设置盒子呈现的顺序。默认情形下，只需定义分布坐标轴——box随html流分布。如果为程度坐标轴,CSS11个class与一个id谁的优先级高，则从左到右分布；垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”，则反转盒子的排列顺序。
view sourceprint? 01,
css-sprite适用的条件 对css-sprite的理解.body { 02. display: box; 03. box-orient: horizontal; 04.} 05.#box1 { 06. box-flex: 2; 07.} 08.#box2 { 09. box-flex: 1; 10,
CSS+DIV网页重构对比TABLE显著优势.} 11.#box3 { 12. box-flex: 1; 13.}
弹性盒模型看起来很不错，Gecko 和 WebKit对该模型都有一些尝试性的测试。在这些属性之前加上-moz和-webkit即可使用该属性。也等于说，firefox、safari、chrome可以使用这些特征。作为前端开发者来说，该模型对咱们解决网页设计中一些常见的问题十分便利，如：表单布局、垂直居中、视觉上分别html流，等等。不就的未来它将成为一个web尺度，早早熟习它不是什么坏事。
与传统的盒模型一样，overflow属性用来决议其显示方式。为了防止溢出，你可以设置box-lines为multiple使其换行显示。
盒子尺寸
默认情况下，盒子并不具备弹性，如果box-flex的属性值至少为1时，则变得富有弹性。
(责任编辑：网站建设)
Css3 弹性盒模型相关文章