《
css3教程：弹性盒模型》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332422013.htm
属性“box- align”管理垂直方向上的空间分布，有以下五个可能属性之：start、 end,、center、 baseline和 stretch。
如果盒子是弹性的，其大小将按下面的方法盘算：
下面的例子中,CSS3教程 使css3的属性在ie中正常显示，box3并不是弹性的，宽度为160px；这样box1和box2将有240px的可利用空间。因而，box1的宽度为160px(240*2/3)，box2的宽度为80px(240*1/3)。
一些盒子有固定大小
属性“box-ordinal-group”定义盒子分布的次序。能够随便的把持其分布顺序。这些组以一个从&ldquo,CSS3教程 Transform-变形处理;1”开端的数字定义，盒模型将首先分布这些组，所有这些盒子将在每个组中。分布将从小到大排列。
详细的大小声明（width、height、min-width、min-height、max-width、max-height）； 父盒子的大小和所有余下的可利用的内部空间
“box-direction”可以设置盒子呈现的顺序。默认情形下,CSS3教程 pointer-events属性值详解，只需定义分布坐标轴——box随html流分布。如果为水平坐标轴，则从左到 右分布；垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”，则反转盒子的排列顺序。
看看下面的例子，懂得起来更轻易。
start 每个盒子沿父盒子的上边缘排列，余下的空间位于底部； end 每个盒子沿父盒子的下边沿排列，余下的空间位于顶部； center 可用空间平均分配，上面一半，下面一半； baseline 所有盒子沿着它们的基线排列，余下的空间可前可后； stretch 每个盒子的高度调剂到合适父盒子的高度
body {
,CSS3教程 overflow属性超过一行显示省略号; display: box;
box-orient: vertical;
box-direction : reverse;
}
#box1 {
box-ordinal-group: 2;
}
#box2 {
box-ordinal-group: 2;
}
#box3 {
box-ordinal-group: 1;
}
溢出治理
可利用空间的分布取决于两个属性值：box-align 和 box-pack,CSS3教程 box-sizing属性。
程度或垂直分布
如果盒子不具备弹性，它将尽可能的宽使其内容可见，且没有任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height）。
Shawn J. Goff: CSS3 Flexible Box Layout Module CSS3.info: Introducing the flexible box layout module W3C: Flexible Box Layout Module
body {
display: box;
box-orient: horizontal;
width: 400px;
}
#box1 {
box-flex: 2;
}
#box2 {
box-flex: 1;
}
#box3 {
width: 160px;
}
所有盒子都是弹性的
body {
display: box;
box-orient: vertical;
box-direction: reverse;
}
详细分布
假如盒子不任何大小申明，那么其大小将完整取决于父box的大小。即：盒子的大小即是父级盒子的大小乘以其box-flex在所有子盒子box-flex总和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和）。
由于是弹性盒子、非弹性盒子混排，有可能所有盒子的尺寸大于或小于父盒子的尺寸。这样就有可能空间太多或空间不足。
display: box;
body{
,CSS3改变文本选中的默认颜色; display: box;
box-orient: horizontal;
}
--> [
网站建设之]css3教程：弹性盒模型
与传统的盒模型一样，overflow属性用来决定其显示方式。为了防止溢出，你可以设置box-lines为multiple使其换行显示。
默认情况下，盒子并不存在弹性，如果box-flex的属性值至少为1时，则变得富有弹性。
反向分布
<body>
<div id="box1">1</div>,CSS3布局 灵活的盒子模型;
,CSS3属性之text-shadow详解; <div id="box2">2</div>
<div id="box3">3</div>
</body>
body {
display: box;
box-orient: horizontal;
width: 400px;
}
#box1 {
box-flex: 2;
}
#box2 {
box-flex: 1;
}
#box3 {
width: 160px;
}
“box-orient”定义散布的坐标轴：vertical跟horizional。这两个值定义盒子如何显示
属性“box-pack”管理水平方向上的空间分布，有以下四个可能属性：start、end、 justify、 or center。
Tag：CSS3 弹性盒模型 CSS3 弹性盒模型
空间不足怎么办
更多参考
body {
display: box;
box-orient: horizontal;
}
#box1 {
box-flex: 2;
}
#box2 {
box-flex: 1;
}
#box3 {
box-flex: 1;
}
弹性盒模型看起来很不错，Gecko 和 WebKit对该模型都有一些尝试性的测试。在这些属性之前加上-moz和-webkit即可使用该属性。也等于说，firefox、safari、chrome可以应用这些特征，可以看看这个弹性盒模型的demo。
如果一个或更多的盒子有一个具体的大小声明,CSS3属性box-shadow详解，那么其大小将计算其中，余下的弹性盒子将依照上面的准则分享剩下的可利用空间。
下面的例子中，box1的大小为box2的两倍，box2与box3大小一样。看起来似乎是用百分比定义盒子的大小,css3对于background的调整与增强，然而有一个差别：使用弹性盒模型，增添一个盒子，毋庸从新计算其大小。
使用该模型，可以很轻松的创立自适应阅读器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码：
start 所有盒子在父盒子的左侧，余下的空间在右侧； end所有盒子在父盒子的右侧，余下的空间在左侧； justify 余下的空间在盒子间均匀调配； center 可应用的空间在父盒子的两侧平均分配。
传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以划定特定的顺序，也可以反转之。要开启弹性盒模型，只要设置领有子盒子的盒子的display的属性值为box（或inline-box）即可。
作为前端开发者来说，该模型对咱们解决网页设计中一些常见的问题十分便利，如：表单布局、垂直居中、视觉上分别html流，等等。不就的未来它将成为一个web尺度，早早熟习它不是什么坏事。
Css3引入了新的盒模型就是弹性盒模型，该模型决议一个盒子在其余盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）类似，其它语言也使用雷同的盒模型，如XAML 、GladeXML。
空间太多如何处置
原文地址：
盒子尺寸
(责任编辑：网站建设)
css3教程：弹性盒模型相关文章