frontopen主题V1.5.04.15版本已发布 推荐更新！
frontopen “讨论区” 正式上线
鸣谢主题捐赠者：感叹帝,Calon YE，孙玉龙，魂客，创想，孜夕寒
顾余笑，小菜，晨风，菠菜，*忠杰，浪子，99开发赞助，IT江湖，小熊
如果发现更新最新版出现缩略图无法显示，请先装回v1.4.03.02版本
Css3 弹性盒模型
Css3 弹性盒模型
围观3824次
编辑日期： 字体：
我们来介绍一下Css3 弹性盒模型。Css3引入了新的盒子模型&—弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。
使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码:
view sourceprint?
&div id=”box1″&1&/div&
&div id=”box2″&2&/div&
&div id=”box3″&3&/div&
传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序，也可以反转之。要开启弹性盒模型，只需设置拥有子盒子的盒子的display的属性值为box（或inline-box）即可。
view sourceprint?
1.display:
水平或垂直分布
“box-orient”定义分布的坐标轴：vertical和horizional。这两个值定义盒子如何显示，
view sourceprint?
box-orient:
“box-direction”可以设置盒子出现的顺序。默认情况下，只需定义分布坐标轴——box随html流分布。如果为水平坐标轴，则从左到右分布；垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”，则反转盒子的排列顺序。
view sourceprint?
box-orient:
box-direction:
属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义，盒模型将首先分布这些组，所有这些盒子将在每个组中。分布将从小到大排列。
view sourceprint?
box-orient:
box-direction :
06.#box1 {
box-ordinal-group: 2;
09.#box2 {
box-ordinal-group: 2;
12.#box3 {
box-ordinal-group: 1;
默认情况下，盒子并不具有弹性，如果box-flex的属性值至少为1时，则变得富有弹性。
如果盒子不具有弹性，它将尽可能的宽使其内容可见，且没有任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height）。
如果盒子是弹性的，其大小将按下面的方式计算：
具体的大小声明（width、height、min-width、min-height、max-width、max-height）；
父盒子的大小和所有余下的可利用的内部空间
如果盒子没有任何大小声明，那么其大小将完全取决于父box的大小。即：盒子的大小等于父级盒子的大小乘以其box-flex在所有子盒子box-flex总和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和）。
如果一个或更多的盒子有一个具体的大小声明，那么其大小将计算其中，余下的弹性盒子将按照上面的原则分享剩下的可利用空间。
看看下面的例子，理解起来更容易。
所有盒子都是弹性的
下面的例子中，box1的大小为box2的两倍，box2与box3大小一样。看起来好像是用百分比定义盒子的大小，但是有一个区别：使用弹性盒模型，增加一个盒子，无须重新计算其大小。
view sourceprint?
box-orient:
05.#box1 {
box-flex: 2;
08.#box2 {
box-flex: 1;
11.#box3 {
box-flex: 1;
一些盒子有固定大小
下面的例子中，box3并不是弹性的，宽度为160px；这样box1和box2将有240px的可利用空间。因此，box1的宽度为160px(240*2/3)，box2的宽度为80px(240*1/3)。
view sourceprint?
box-orient:
width: 400
06.#box1 {
box-flex: 2;
09.#box2 {
box-flex: 1;
12.#box3 {
width: 160
因为是弹性盒子、非弹性盒子混排，有可能所有盒子的尺寸大于或小于父盒子的尺寸。这样就有可能空间太多或空间不足。
空间太多如何处理
可利用空间的分布取决于两个属性值：box-align 和 box-pack。
属性“box-pack”管理水平方向上的空间分布，有以下四个可能属性：start、end、 justify、 or center。
start 所有盒子在父盒子的左侧，余下的空间在右侧；
end所有盒子在父盒子的右侧，余下的空间在左侧；
justify 余下的空间在盒子间平均分配；
center 可利用的空间在父盒子的两侧平均分配。
属性“box- align”管理垂直方向上的空间分布，有以下五个可能属性之：start、 end,、center、 baseline和 stretch。
start 每个盒子沿父盒子的上边缘排列，余下的空间位于底部；
end 每个盒子沿父盒子的下边缘排列，余下的空间位于顶部；
center 可用空间平均分配，上面一半，下面一半；
baseline 所有盒子沿着它们的基线排列，余下的空间可前可后；
stretch 每个盒子的高度调整到适合父盒子的高度
view sourceprint?
box-orient:
/* The content of the body is horizontally centered */
/* and vertically as well … o/ */
box-align:
width: 100%;
height : 100%;
空间不足怎么办
与传统的盒模型一样，overflow属性用来决定其显示方式。为了避免溢出，你可以设置box-lines为multiple使其换行显示。
弹性盒模型看起来很不错，Gecko 和 WebKit对该模型都有一些尝试性的测试。在这些属性之前加上-moz和-webkit即可使用该属性。也即是说，firefox、safari、chrome可以使用这些特性。作为前端开发者来说，该模型对我们解决网页设计中一些常见的问题非常方便，如：表单布局、垂直居中、视觉上分离html流，等等。不就的将来它将成为一个web标准，早早熟悉它不是什么坏事。
本文固定链接:
转载请注明:
作者：zhoumeng
这个作者貌似有点懒，什么都没有留下。
如果您觉得这篇文章有用处，请支持作者！鼓励作者写出更好更多的文章！
您可能还会对这些文章感兴趣！追求美，向往美，为美而生，为美创造...
CSS3弹性伸缩布局简介
2009年，W3C提出了一种崭新的方案----Flex布局（即弹性伸缩布局），它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端的布局，所以本次主要讲解一下旧版本和新版本在移动端使用的各个知识点，让大家对神秘的flex布局熟悉起来。
旧版本（box）
首先看一下浏览器兼容情况：
PS：浏览器兼容数据不一定很准确，不过相差不大。
下面将通过一个简单的实例来讲解旧版本的各个属性：
html代码：
&p&发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给&/p&
&p&发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给&/p&
&p&发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划&/p&
可以看到我们这个例子是很简单的，一个div元素内包含三个p元素，它们都是块元素（block）。接下来给段落加一些基础的样式：
width:<span style="color: #px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
此时刷新网页看到的结果是这样的：
这个结果很正常吧！OK，现在我们给div元素设置为box,看看有什么变化：
display:-webkit-box;
display:box;
我们再次刷新网页，结果是这样的：
看到了吧，现在每一个p元素都变成一个box了，这就是弹性布局的神奇所在！
在上面中，我们将div元素的display设置为box，这就是旧版本的弹性布局。对于比较旧的浏览器版本，我们需要加上-webkit-前缀。
旧版本的弹性布局有两个属性值：
&box : 将容器盒模型作为块级弹性伸缩盒显示
& inline-box : 将容器盒模型作为内联级弹性伸缩盒显示
PS：我们知道块级它是占用整行的，比如div元素；而内联级不占用整行，比如span元素。但是我们设置了整个盒子，他们都不占用，保持一致。就像我们上面的例子一样，给div元素设置了盒子，那么div元素里面的p元素就不占用了。
下面介绍旧版本弹性布局的各个属性：
box-orient 属性
box-orient属性主要实现盒子内部元素的流动方向。
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
此时的结果就是垂直排列：
此属性的属性值有：
horizontal ： 伸缩项目从左到右水平排列
&&& vertical& ： 伸缩项目从上到下垂直排列
inline-axis ： 伸缩项目沿着内联轴排列显示
block-axis ： 伸缩项目沿着块轴排列显示
大家不妨试一下：horizontal 和 inline-axis 都是水平排列，而vertical 和 block-axis 都是垂直排列。
box-direction属性
box-direction 属性主要是设置伸缩容器中的流动顺序。
display:-webkit-box;
display:box;
-webkit-box-direction:reverse;
box-direction:reverse;
这样我们的排序就是反序的了，运行结果为：
此属性的属性值有：
normal& : 正常顺序，默认值
reverse : 反序
box-pack属性
box-pack 属性用于伸缩项目的分布方式。
此属性的属性值有：
start&& :& 伸缩项目以起始点靠齐
& end&& :& 伸缩项目以结束点靠齐
center :& 伸缩项目以中心点靠齐
justify& :& 伸缩项目平局分布
下面我们都试一下各个属性值的效果：
1.start属性值
-webkit-box-pack:start;
box-pack:start;
这个就是默认靠齐方式：
2.end属性值
-webkit-box-pack:
这个就是以结束点靠齐：
3.center属性值
-webkit-box-pack:
这就是居中对齐效果：
4.justify属性值
-webkit-box-pack:
这个就是平均分布效果：
PS:垂直方向上也是一样的原理，但如果height为auto的话，效果将出不来。所以需要给height设置一个定高（最好比默认情况高）。这时，就能看到在垂直方向上的效果了。这里我就不再赘述了。
box-align属性
box-align 属性用来处理伸缩容器的额外空间。
此属性的属性值有：
&&&& start& ： 伸缩项目以顶部为基准，清理下部额外空间
&&&& end&&& ： 伸缩项目以底部为基准，清理上部额外空间
&& center ： 伸缩项目以中部为基准，平均清理上下部额外空间
baseline ： 伸缩项目以基线为基准，清理额外的空间
stretch& ： 伸缩项目填充整个容器，默认值
同样的，我们将试一下每个属性值的效果：
1.start属性值
display:-webkit-box;
display:box;
-webkit-box-align:start;
box-align:start;
效果如下：
2.end属性值
display:-webkit-box;
display:box;
-webkit-box-align:
box-align:
效果如下：
3.center属性值
display:-webkit-box;
display:box;
-webkit-box-align:
box-align:
效果如下：
4.baseline属性值
如果box-orient是内嵌单轴或横向，所有的子元素都置于他们的基线对齐。
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:baseline;
box-align:baseline;
效果如下：
而如果box-orient是块轴或者垂直方向的，那么所有的子元素都将居中垂直排列。
display:-webkit-box;
display:box;
-webkit-box-orient:
box-orient:vertical;
-webkit-box-align:baseline;
box-align:baseline;
效果如下：
5.stretch属性值
所有子元素拉伸以填充包含区块。
display:-webkit-box;
display:box;
-webkit-box-align:
box-align:
效果如下：
box-flex属性
box-flex 属性可以使用浮点数分配伸缩项目的比例。此属性是给容器内的项目设置的，它们会基于父容器的宽度来分配它们所占的比例：
p:nth-child(1){
-webkit-box-flex:1;
box-flex:1;
p:nth-child(2){
-webkit-box-flex:3;
box-flex:3;
p:nth-child(3){
-webkit-box-flex:1;
box-flex:1;
效果如下：
当然也可以有些项目是固定宽度的，那么其他的项目也会分配剩余的宽度，比如这里第一个p元素设置为固定宽度：
p:nth-child(2){
-webkit-box-flex:2;
box-flex:2;
p:nth-child(3){
-webkit-box-flex:1;
box-flex:1;
效果如下：
更多使用情况，大家可以自己慢慢去尝试。
box-ordinal-group 属性
box-ordinal-group 属性可以设置伸缩项目的显示位置。
p:nth-child(1){
-webkit-box-ordinal-group:2;
box-ordinal-group:2;
p:nth-child(2){
-webkit-box-ordinal-group:3;
box-ordinal-group:3;
p:nth-child(3){
-webkit-box-ordinal-group:1;
box-ordinal-group:1;
效果如下：
可以看到：第一个p元素排在了第二，第二个p元素排在了第三，第三个p元素排在了第一。可以单独给某一个p元素设置此属性，其他项目会按照原来的顺序做变动。
OK，那么旧版本的所有属性就简单的介绍完了，更多结合的用法还是根据需要自己多动手去练习一下。
这里举一个水平垂直居中的例子：
display:-webkit-box;
display:box;
height:<span style="color: #px;
border:1px solid #f00;
-webkit-box-pack:center;
box-pack:center;
-webkit-box-align:center;
box-align:center;
那么效果就是这样的了：
此时我们再给p元素设置一个固定的高度：
width:<span style="color: #px;
height:<span style="color: #px;
那么这时的效果就是：
是不是很轻松就实现了这种效果呢！
好的，到这里旧版本的弹性布局基础知识点就都介绍了一下。由于篇幅过长，怕大家看着疲劳，新版本的弹性布局（flex）我将放在下一篇博客介绍。希望能帮到大家，同时尽请关注！
若需转载，请注明出处，谢谢合作！
阅读(...) 评论()弹性盒模型，该模型用于决定元素在盒子中的分布方式以及如何处理盒子的可用空间。有了他，咱们就可以轻松创建自适应浏览器窗口的流动布局或者自适应字体大小的弹性布局。
其属性有：
box-align，定义子元素在盒子内垂直方向上的空间分配方式。
box-pack，定义子元素在盒子内水平方向上的空间分配方式。
box-direction，定义盒子的布局顺序。
box-orient，定义盒子的布局取向。
box-ordinal-group，定义盒子布局的位置。
box-flex，定义盒子的弹性空间。
box-lines，空间溢出管理。
下面就一一对其解释。
box-orient，定义盒子元素内部的流动布局方向，父容器的display设置为box或者inline-box。其值可以是horizontal:盒子元素从左到右在一条水平线上显示他的子元素；vertical:盒子元素从上到下在一条垂直线上显示他的子元素；inline-axis：盒子元素沿着内联轴显示他的子元素；block-axis:盒子元素沿着块轴显示他的子元素。
box-direction，改变盒子元素中内部元素的流动顺序，其值可以是normal:正常顺序显示；reverse：反向显示；inherit：继承上级元素的显示顺序。
box-ordinal-group，可以设置每一个子元素在盒子中的具体显示位置，他的值是自然数，从1开始，根据该值的大小进行排序。
box-flex，该属性在弹性布局中绝对的好使啊，他的取值是一个整数或者小数，当盒子中定义了多个box-flex时，浏览器将会把这些子元素的box-flex值相加，然后计算他们各自所占的比例来分配空间，但是他只能在盒子拥有固定的空间大小之后才能够正确解析。
box-pack，他的值可以是start：显示在盒子的左侧，富余空间显示在右侧；end：显示在盒子的右侧，富余空间显示在左侧；center：平均分配；justify：富余的空间在子元素之间平均分配。
box-align，他的值可以是start：沿着盒子的上边缘排序；end：沿盒子的下边缘排序；center：上面一半，下面一半；baseline：所有盒子沿着他们的基线排列，富余空间可前可后显示；stretch：每个子元素的高度被调整到适合盒子的高度显示。
box-lines，其取值可以使single：所有子元素都单行或者单列显示；multiple：所有子元素可以多列或者多行显示。不过目前并没有浏览器支持这一属性。
阅读(...) 评论()Web 应用的样式设计中，布局是非常重要的一部分。布局用来确定页面上不同组件和元素的尺寸和位置。随着响应式用户界面的流行，Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局，从而改变组件的尺寸和位置， 以达到最佳的显示效果。这也使得布局的逻辑变得更加复杂。本文介绍的是 CSS3 规范中引入的新布局模型：弹性盒模型（flex box）。弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏 览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、 对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条 目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其 中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式 中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
在深入到弹性盒布局模型的细节之前，首先了解几个相关的重要概念，具体如所示。
图 1. 弹性盒布局模型相关的概念
弹性盒布局的容器（flex container）指的是采用了弹性盒布局的 DOM 元素，而弹性盒布局的条目（flex item）指的是容器中包含的子 DOM 元素。图中的最外围的边框表示的是容器，而编号 1 和 2 的边框表示的是容器中的条目。
从 图中可以看到，弹性盒布局中有两个互相垂直的坐标轴：一个称之为主轴（main axis），另外一个称之为交叉轴（cross axis）。主轴并不固定为水平方向的 X 轴，交叉轴也不固定为垂直方向的 Y 轴。在使用时，通过 CSS 属性声明首先定义主轴的方向（水平或垂直），则交叉轴的方向也相应确定下来。容器中的条目可以排列成单行或多行。主轴确定了容器中每一行上条目的排列方 向，而交叉轴则确定行本身的排列方向。可以根据不同的页面设计要求来确定合适的主轴方向。有些容器中的条目要求从左到右水平排列，则主轴应该是水平方向 的；而另外一些容器中的条目要求从上到下垂直排列，则主轴应该是垂直方向的。
确定主轴和交叉轴的方向之后，还需要确定它们各自的排列方向。 对于水平方向上的轴，可以从左到右或从右到左来排列；对于垂直方向上的轴，则可以从上到下或从下到上来排列。对于主轴来说，排列条目的起始和结束位置分别 称为主轴起始（main start）和主轴结束（main end）；对于交叉轴来说，排列行的起始和结束位置分别称为交叉轴起始（cross start）和交叉轴结束（cross end）。在容器进行布局时，在每一行中会把其中的条目从主轴起始位置开始，依次排列到主轴结束位置；而当容器中存在多行时，会把每一行从交叉轴起始位置 开始，依次排列到交叉轴结束位置。
弹性盒布局中的条目有两个尺寸：主轴尺寸和交叉轴尺寸，分别对应其 DOM 元素在主轴和交叉轴上的大小。如果主轴是水平方向，则主轴尺寸和交叉轴尺寸分别对应于 DOM 元素的宽度和高度；如果主轴是垂直方向，则两个尺寸要反过来。与主轴和交叉轴尺寸对应的是主轴尺寸属性和交叉轴尺寸属性，指的是 CSS 中的属性 width 或 height。比如，当主轴是水平方向时，主轴尺寸属性是 width，而 width 的值是主轴尺寸的大小。
弹性盒布 局模型中的 CSS 样式声明分别适用于容器或条目。在下面的内容中会详细的介绍相关的 CSS 属性。首先介绍如何使用弹性盒布局模型进行基本的页面布局。在本文的所有代码示例中，容器的 CSS 类名统一为 flex-container，而条目的 CSS 类名则为 flex-item。所有的示例都可以在上进行预览。
首先从最基本的布局开始介绍弹性盒布局模型。要实现的布局效果是一个简单的图片缩略图预览页面。页面的基本 HTML 如所示。
清单 1. 简单的图片缩略图预览页面的 HTML 代码
&ul class="flex-container"&
&li class="flex-item"&&img src="http://placehold.it/300&text=1"&&/li&
&li class="flex-item"&&img src="http://placehold.it/300&text=2"&&/li&
&li class="flex-item"&&img src="http://placehold.it/300&text=3"&&/li&
&li class="flex-item"&&img src="http://placehold.it/300&text=4"&&/li&
&li class="flex-item"&&img src="http://placehold.it/300&text=5"&&/li&
&li class="flex-item"&&img src="http://placehold.it/300&text=6"&&/li&
该页面的基本 HTML 是很简单的。在一个&ul&元素下面有 6 个&li&元素。每个&li&元素中包含一个大小为 300x300 的缩略图图片。&ul&元素作为弹性盒布局的容器，而&li&元素则是容器中的条目。实现基本布局的 CSS 如所示。
清单 2. 简单的图片缩略图预览页面的 CSS 代码
.flex-container {
list-style:
flex-direction:
flex-wrap:
.flex-item {
padding: 5
在代码清单 2 中，对于弹性盒布局的容器，使用"display: flex"声明使用弹性盒布局。CSS 属性声明"flex-direction"用来确定主轴的方向，从而确定基本的条目排列方式。"flex-direction"属性的可选值及其含义如所示。
表 1. &flex-direction&属性的可选值及其含义
row（默认值）
主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr，则排列顺序是从左到右；如果文档顺序是 rtl，则排列顺序是从右到左。
row-reverse
主轴为水平方向。排列顺序与页面的文档顺序相反。
主轴为垂直方向。排列顺序为从上到下。
column-reverse
主轴为垂直方向。排列顺序为从下到上。
默认情况下，弹性盒容器中的条目会尽量占满容器在主轴方向上的一行。当容器的主轴尺寸小于其
所有条目总的主轴尺寸时，会出现条目之间互相重叠或超出容器范围的现象。CSS
属性"flex-wrap"用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行为。"flex-wrap"属性的可选值及其含义如所示。
表 2. &flex-wrap&属性的可选值及其含义
nowrap（默认值）
容器中的条目只占满容器在主轴方向上的一行，可能出现条目互相重叠或超出容器范围的现象。
当容器中的条目超出容器在主轴方向上的一行时，会把条目排列到下一行。下一行的位置与交叉轴的方向一致。
wrap-reverse
与 wrap 的含义类似，不同的是下一行的位置与交叉轴的方向相反。
可以使用"flex-flow"属性把"flex-direction"和"flex-wrap"结合起来，如所示。
清单 3. &flex-flow&属性的使用示例
flex-flow:
容器中的条目
除了弹性盒布局模型中的容器之外，容器中的条目也可以通过 CSS 属性来改变其布局行为。下面介绍容器中的条目可以使用的 CSS 属性声明。
条目的顺序
默认情况下，容器中条目的顺序取决于它们在 HTML 标记代码中的出现顺序。可以通过"order"属性来改变条目在容器中的出现顺序。对于代码中的 HTML 标记添加中的 CSS 声明，运行之后的效果是最后一个&li&元素出现在了其他&li&元素的最前面。预览的页面见。
清单 4. &order&属性的使用示例
.flex-item:last-child {
order: -1;
"order"属性的主要作用是兼顾页面的样式和可访问性。支持可访问性的设备，如屏幕阅读器，都是按照 HTML 中代码的顺序来读取元素的。这就要求一些相对重要的文本出现在 HTML 标记的前面。而对于使用浏览器的一般用户来说，在某些情况下把一些相对不重要的图片显示在前面是更好的选择。比如在一个商品的展示页面中，在源代码中把商 品描述的文本放在商品图片之前。这样可以方便屏幕阅读器的读取；而在 CSS 中使用"order"属性把图片放在文本的前面。这样可以让用户首先看到图片。
条目尺寸的弹性
弹 性盒布局模型的核心在于容器中条目的尺寸是弹性的。容器可以根据本身尺寸的大小来动态地调整条目的尺寸。当容器中有空白空间时，条目可以扩展尺寸以占据额 外的空白空间；当容器中的空间不足时，条目可以缩小尺寸以防止超出容器范围。条目尺寸的弹性由 3 个 CSS 属性来确定，分别是"flex-basis"、"flex-grow"和"flex-shrink"。
"flex-basis"属性声明接 受的值与"width"属性是一样的，用来确定弹性条目的初始主轴尺寸。这是条目的尺寸被容器调整之前的初始值。如果"flex-basis"的值为 auto，则实际使用的值是主轴尺寸属性的值，即 width 或 height 属性的值。如果主轴尺寸属性的值也是 auto，则使用的值由条目内容的尺寸来确定。
"flex-grow"属性的值是一个没有单位的非负数，默认值是 1。"flex-grow"属性的值表示的是当容器有多余的空间时，这些空间在不同条目之间的分配比例。比如，一个容器中有 3 个条目，其"flex-grow"属性的值分别为 1，2 和 3，那么当容器中有空白空间时，这 3 个条目所获得的额外空白空间分别占全部空间的 1/6、1/3 和 1/2，如所示。预览的页面见。
清单 5. &flex-grow&属性的使用示例
.flex-item:nth-child(1) {
flex-grow: 1;
.flex-item:nth-child(2) {
flex-grow: 2;
.flex-item:nth-child(3) {
flex-grow: 3;
"flex-shrink"属性在使用上类似于"flex-grow"。该属性的值也是无单位的，表示的是当容器的空间 不足时，各个条目的尺寸缩小的比例。在进行尺寸缩小时，条目的缩小比例与"flex-basis"的值相乘之后，就得到了应该缩小的尺寸的实际值。例如， 在容器中有 3 个条目，其"flex-shrink"属性的值分别为 1，2 和 3。每个条目的主轴尺寸均为 200px。当容器的主轴尺寸不足 600px 时，比如变成了 540px 之后， 则需要缩小的尺寸 60px 由 3 个条目按照比例来分配。3 个条目分别要缩小 10px、20px 和 30px，主轴尺寸分别变为 190px、180px 和 170px。预览的页面见。
使 用属性"flex"可以同时声明"flex-basis"、"flex-grow"和"flex-shrink"的值，格式是"none | [ &'flex-grow'& &'flex-shrink'&? || &'flex-basis'& ]"。该属性的值的 3 个组成部分的初始值分别是"0 1 auto"。当属性"flex"的值为 none 时，相当于"0 0 auto"。当组成部分"flex-basis"被省略时，其值为 0%。给出了属性"flex"的使用示例。
清单 6. 属性&flex&的使用示例
.flex-item:nth-child(1) {
// flex-grow 的值为 1，flex-shrink 的值为 1，flex-basis 的值为 0%。
需要注意的是，在容器分配额外空间时是以"行"为单位的。容器先根据"flex-wrap"的属性值来确定是单行布局或多行布局，然后把条目分配到对应的行中，最后在每一行内进行空白空间的分配。如中的 CSS 声明示例，在容器中有 4 个条目。
清单 7. 多行布局的 CSS 声明
.flex-container {
width: 990
.flex-item {
width: 300
由于容器的宽度只有 990px，所以在一行中只能排列 3 个条目，而剩下的 1 个条目则会被排列到单独的一行中。在 3 个条目的行中，多余的空间 90px 被平均分配给 3 个条目；而在一个条目单独的行中，多余的 690px 被该条目完全占据。
当容器中的条目的尺寸确定之后，可以设置这些条目在容器中的对齐方式。对齐条目的方式有 3 种。
第一种方式是使用自动空白边，即"margin: auto"。在使用自动空白边时，容器中额外的空白空间会被声明为 auto 的空白边占据，如所示。CSS 声明 profile 中通过"margin-left: auto"使得该条目左边的空白边会占据额外的空间，从而"Profile"文本会靠右显示。预览的页面见。
清单 8. 使用自动空白边进行条目对齐
&div class="flex-container"&
&div class="logo"&Logo&/div&
&div class="profile"&Profile&/div&
.flex-container {
.profile {
margin-left:
第二种方式是在主轴方向上的对齐。这是通过容器上的"justify-content"属性来进行设置，可以调整条目在 主轴方向上的对齐方式。这种条目对齐方式的调整发生在修改条目的弹性尺寸和处理自动空白边之后。当容器中的一行中的条目没有弹性尺寸，或是已经达到了它们 的最大尺寸时，在这一行上可能还有额外的空白空间。使用"justify-content"属性可以分配这些空间。该属性还可以控制当条目超出行的范围时 的对齐方式。"justify-content"属性的可选值和含义如所示，实际的布局效果见。
表 3. &justify-content&属性的可选值和含义
属性值含义
flex-start
条目集中于该行的起始位置。第一个条目与其所在行在主轴起始方向上的边界保持对齐，其余的条目按照顺序依次排列。
条目集中于该行的结束方向。最后一个条目与其所在行在主轴结束方向上的边界保持对齐，其余的条目按照顺序依次排列。
条目集中于该行的中央。条目都往该行的中央排列，在主轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则条目会在两个方向上超出同样的空间。
space-between
第一个条目与其所在行在主轴起始方向上的边界保持对齐，最后一个条目与其所在行在主轴结束方向上的边界保持对齐。空白空间在条目之间平均分配，使得相邻条目之间的空白尺寸相同。
space-around
类似于 space-between，不同的是第一个条目和最后一个条目与该行的边界之间同样存在空白空间，该空白空间的尺寸是条目之间的空白空间的尺寸的一半。
图 2. &justify-content&属性不同值的布局效果
第 三种方式是交叉轴方向上的对齐。除了在主轴方向上对齐之外，条目也可以在交叉轴方向上对齐。容器上的属性"align-items"用来设置容器中所有条 目在交叉轴上的默认对齐方向，而条目上的属性"align-self"用来覆写容器指定的对齐方式。属性"align-items"的可选值和含义如所示，实际的布局效果见。
表 4. 属性&align-items&的可选值和含义
属性值含义
flex-start
条目与其所在行在交叉轴起始方向上的边界保持对齐。
条目与其所在行在交叉轴结束方向上的边界保持对齐。
条目的空白边盒子（margin box）在交叉轴上居中。如果交叉轴尺寸小于条目的尺寸，则条目会在两个方向上超出相同大小的空间。
条目在基准线上保持对齐。在所有条目中，基准线与交叉轴起始方向上的边界距离最大的条目，它与所在行在交叉轴方向上的边界保持对齐。
如果条目的交叉轴尺寸的计算值是"auto"，则其实际使用的值会使得条目在交叉轴方向上尽可能地占满。
属性"align-self"的可选值除了表中列出的之外，还可以设置为"auto"。当"align-self"的值为 auto 时，其计算值是父节点的属性"align-items"的值。如果该节点没有父节点，则计算值为"stretch"。
图 3. 属性&align-items&不同值的布局效果
交叉轴空白处理
当 容器在交叉轴方向上有空白空间时，属性"align-content"用来对齐容器中的行。该属性的作用类似于"justify-content"，只不 过"justify-content"是在主轴方向上对齐行中的条目。当容器中只有单行时，该属性不起作用。属性"align-content"的可选值 和含义如所示，实际的布局效果见。
表 5. 属性&align-content&的可选值和含义
属性值含义
flex-start
行集中于容器的交叉轴起始位置。第一行与容器在交叉轴起始方向上的边界保持对齐，其余行按照顺序依次排列。
行集中于容器的交叉轴结束位置。第一行与容器在交叉轴结束方向上的边界保持对齐，其余行按照顺序依次排列。
行集中于容器的中央。行都往容器的中央排列，在交叉轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则行会在两个方向上超出同样的空间。
space-between
行在容器中均匀分布。第一行与容器在交叉轴起始方向上的边界保持对齐，最后一行与容器在交叉轴结束方向上的边界保持对齐。空白空间在行之间平均分配，使得相邻行之间的空白尺寸相同。
space-around
类似于 space-between，不同的是第一行条目和最后一个行目与容器行的边界之间同样存在空白空间，而该空白空间的尺寸是行目之间的空白空间的尺寸的一半。
伸展行来占满剩余的空间。多余的空间在行之间平均分配，使得每一行的交叉轴尺寸变大。
图 4. 属性&align-content&的不同值的布局效果
下面通过一个示例来具体说明弹性盒布局在实际开发中的应用。该示例是一个博客帖子的典型页面布局。在展示一个博客帖子时，页面上通常包括标题、发表者、日期和时间、评论数量、正文、插图、评论列表等元素。这些元素基本上按照从上到下的顺序依次排列。和中给出了示例的 HTML 和 CSS 代码。预览页面见。
清单 9. 博客页面的 HTML 代码
&div class="post"&
&h1&This is my first blog post&/h1&
&div class="post-meta"&
&div class="author"&Alex Cheng&/div&
&div class="datetime"& 10:10 am&/div&
&div class="comments-count"&2 comments&/div&
&div class="post-body"&
My first blog post.
&div class="post-image"&
&img src="http://placehold.it/500x200&text=1"&
&div class="post-comments"&
&h3&Comments&/h3&
&li&&div class="author"&Bob&/div&&div&This is a good post.&/div&&/li&
&li&&div class="autho"&David&/div&&div&Good post.&/div&&/li&
清单 10. 博客页面的 CSS 代码
flex-flow:
.post-meta {
flex-flow:
.post-body {
.post-comments {
.comments-count {
margin-left:
.post-image {
align-self:
该示例中主要使用了"order"属性来改变条目的显示位置，以及使用"align-self"来使得图片居中显示。
下面通过一个示例来具体说明弹性盒布局在实际开发中的应用。该示例是一个博客帖子的典型页面布局。在展示一个博客帖子时，页面上通常包括标题、发表者、日期和时间、评论数量、正文、插图、评论列表等元素。这些元素基本上按照从上到下的顺序依次排列。和中给出了示例的 HTML 和 CSS 代码。预览页面见。
清单 9. 博客页面的 HTML 代码
&div class="post"&
&h1&This is my first blog post&/h1&
&div class="post-meta"&
&div class="author"&Alex Cheng&/div&
&div class="datetime"& 10:10 am&/div&
&div class="comments-count"&2 comments&/div&
&div class="post-body"&
My first blog post.
&div class="post-image"&
&img src="http://placehold.it/500x200&text=1"&
&div class="post-comments"&
&h3&Comments&/h3&
&li&&div class="author"&Bob&/div&&div&This is a good post.&/div&&/li&
&li&&div class="autho"&David&/div&&div&Good post.&/div&&/li&
清单 10. 博客页面的 CSS 代码
flex-flow:
.post-meta {
flex-flow:
.post-body {
.post-comments {
.comments-count {
margin-left:
.post-image {
align-self:
该示例中主要使用了"order"属性来改变条目的显示位置，以及使用"align-self"来使得图片居中显示。
作为 CSS3 规范的一部分，弹性盒布局模型可以在很多典型的场景中简化完成布局所需的 CSS 代码。该布局模型也提供了很多实用的特性来满足常见的布局要求，包括对容器中条目的排列、对齐、调整大小和分配空白空间等。弹性盒布局模型可以作为 Web 开发人员工具箱中的一个很好的工具。
阅读(...) 评论()