box-pack 作用：用来规定子元素在盒子内的水平空间分配方式
box-pack 语法：box-pack: start | end | center | justify;
| start |
对于正常方向的框，首个子元素的左边缘吸附在盒子的左边框显示
对于相反方向的框，最后子元素的右边缘吸附在盒子的右边框显示
|
| end |
对于正常方向的框，最后子元素的右边缘吸附在盒子的右边框显示
对于相反方向的框，首个子元素的左边缘吸附在盒子的左边框显示
|
| center | 均等分割剩余空间，一半在首个子元素之前，一半在最后子元素之后 |
| justify | 首尾子元素分别吸附在左右边框上，中间的子元素分割多余空间 |
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
示例:
box-pack:start;
|
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:center; /*在垂直方向上，居中显示*/
-moz-box-align:center;
box-align:center;
-webkit-box-pack:start; /*在水平方向上，正常情况下，从左侧显示。*/
-moz-box-pack:start;
box-pack:start;
}
|
运行效果如下：
当然，如果盒子的顺序是从右到做，则上图就会吸附在右侧边框显示。
box-pack:end;
|
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:center; /*在垂直方向上，居中显示*/
-moz-box-align:center;
box-align:center;
-webkit-box-pack: end; /*在水平方向上，正常情况下，吸附在右侧显示。*/
-moz-box-pack: end;
box-pack: end;
}
|
运行效果如下：
注：如果盒子内的显示顺序是相反方向，则它会吸附在左侧边框显示。
box-pack:center
|
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:center; /*在垂直方向上，居中显示*/
-moz-box-align:center;
box-align:center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}
|
运行效果如下：
box-pack:justify
|
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:center; /*在垂直方向上，居中显示*/
-moz-box-align:center;
box-align:center;
-webkit-box-pack: justify; /*在水平方向上，正常情况下，从左侧显示。*/
-moz-box-pack: justify;
box-pack: justify;
}
|
运行效果如下:
box-direction 作用：box-direction规定了盒子内子元素以什么方向来排列。
box-direction 语法：box-direction: normal | reverse | inherit;
| normal | 以默认方式显示子元素 |
| reverse | 以相反方向显示子元素 |
| inherit | 从父容器继承box-direction |
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
示例：
现在我就基于上面的例子，在样式表文件的 .row 里加上box-direction属性，大家一起观察分别观察它们的区别
| 以水平方向显示子元素 box-orient:horizontal; | ||||||
|
| 以垂直方向显示子元素 box-orient: vertical; | ||||||
|
从上面的比较，大家可以看出，box-direction是根据当前子元素的显示方向（水平或垂直）来起作用的。
box-direction:inherit 这个大家可以私下自行测试。
box-flex 作用：box-flex属性规定了盒子内的子元素是否可以自动伸缩其尺寸，只要盒子内对应显示方向上有剩余空间，可伸缩元素就会扩展来填充这些空间。
box-flex 语法：box-flex: value。
| value | 元素的可伸缩值，柔性是相对，例如 box-flex:2.0 的子元素伸缩尺寸两倍于 box-flex:1.0的子元素 |
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
示例：
现在我们就来对box-flex的作用通过示例来证明一下：
| 对 sidebar 应用样式 |
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
}
.article{/*给主体内容添加样式*/
background-color:#FEB380;
}
|
从显示效果来看， 这正好证明了， 设置了box-flex的元素是有弹性的，
且只要盒子内对应显示方向上有剩余空间， 可伸缩元素就会扩展来填充这些空间。
|
| 对sidebar和middle应用样式 |
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
.article{/*给主体内容添加样式*/
background-color:#FEB380;
}
|
从显示效果可以看出，当 .middle 样式设置了box-flex:2.0时，
应用了 .middle 样式的元素也变成了弹性元素，且伸缩尺寸是
box-flex:1.0的两倍。
|
| 对sidebar,middle和article应用样式 |
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
-webkit-box-flex: 1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
.article{/*给主体内容添加样式*/
background-color:#FEB380;
-webkit-box-flex:3.0;
-moz-box-flex:3.0;
box-flex:3.0;
}
|
这里大家得注意一下，大家可能会认为，.article应该占1/2的空间的，
怎么看.sidebar和.middle加起来都比.article大的啊
其实这里分配的原则是， 剩余空间按照对应比率来分配。
对sidebar来说，伸缩的空间 = 总剩余空间 *(1.0/6.0)；
对middle来说，伸缩的空间 = 总剩余空间*(2.0/6.0) ;
对article来说，伸缩的空间 = 总剩余空间 * (3.0/6.0);
|
box-flex-group 作用： 一组设置了box-flex-group元素当中，值最小的，占用全部剩余空间；值最小且相等，则平均分配剩余空间。
|
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
-webkit-box-flex-group:1;
-moz-box-flex-group:1;
box-flex-group:1;
}
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-flex-group:2;
-moz-box-flex-group:2;
box-flex-group:2;
}
.article{/*给主体内容添加样式*/
background-color:#FEB380;
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-flex-group:1;
-moz-box-flex-group:1;
box-flex-group:1;
}
|
大家从效果图应该可以看出， 如果box-flex-group的值较大，则它只分配实际空间，
剩余空间分配给最小的一组 按比率分配。
这句话到底啥意思呢？
我们从代码中可以看到：sidebar的box-flex-group为1，article的box-flex-group也为1，
所以 sidebar和article分配剩余的空间。 但是article的box-flex两倍于sidebar的box-flex，
所以剩余空间，article伸缩的空间 应该是 sidebar伸缩空间的两倍。
|
box-ordinal-group 作用：box-ordinal-group属性可以使我们定义子元素的显示顺序，值小的排在前，值大的排在后。
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
示例：
我们先看一下，没有运用box-ordinal-group属性时的运行效果，样式代码如下：
|
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
.article{/*给主体内容添加样式*/
background-color:#FEB380;
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
}
|
此时运行页面，效果如下：
根据上面页面，当前的显示顺序是 sidebar -> middle -> article
现在我们给这些子元素应用box-ordinal-group，且相应值 middle < article < sidebar，则我们期待的显示顺序应该是， middle -> article -> sidebar
样式代码如下：
|
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-ordinal-group:4;
-moz-box-ordinal-group:4;
box-ordinal-group:4;
}
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
box-ordinal-group:2;
}
.article{/*给主体内容添加样式*/
background-color:#FEB380;
-webkit-box-flex:2.0;
-moz-box-flex:2.0;
box-flex:2.0;
-webkit-box-ordinal-group:3;
-moz-box-ordinal-group:3;
box-ordinal-group:3;
}
|
运行页面，效果如下：
从效果图来看，的确是按照我们所期待的顺序显示的（ middle -> article -> sidebar）。
至此，CSS3新增弹性盒模型属性就讲完了，本节内容还是比较多的，但是它给了我们很多惊喜，让我们在页面布局方面更加收放自如。
下一节，我讲综合运用CSS3 弹性盒模型 属性 来手把手教大家 《CSS3实战开发: 弹性WEB界面设计（兼容移动端浏览器）》。
欢迎大家加入互联网技术交流群：62329335
个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。
相关推荐
此资源为css3弹性盒模型，里面有资源的介绍和用法，欢迎下载
css盒模型css盒模型css盒模型css盒模型css盒模型
在逆战班又学习了一周，接下来讲讲我对CSS弹性盒子的理解。 弹性盒子是 CSS3 的一种新的布局模式。...引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
这是一个CSS的PPT CSS 盒模型，主要介绍CSS中的盒模型
单元二 CSS3样式表端基础前Web单元2-6 框模型（盒子模型）13内边距框模型概述42边框外边距文档结构与标准文档流span为inline元素，若干个inline元素是水平排列的body，ul，li为block元素，它们独占一整行，兄弟之间...
本文介绍了CSS3弹性盒模型，供大家参考，大家亦可以结合CSS3弹性盒模型开发笔记（一）、CSS3弹性盒模型开发笔记（二）进行学习，具体内容如下 box-pack和box-align属性 当弹性元素和非弹性元素混合排版时，有可能会...
CSS+盒模型,css盒模型面试题,HTML源码
CSS+DIV-盒子模型示例.zip
CSS+盒模型
这是我自己项目总结的一些布局方法，基于DIV+CSS实现的一种弹性盒模型布局，主要利用display:table-cell;这一属性来实现，兼容良好，可扩展性也比较强。适用于做前端重构、架构的童鞋。
CSS盒子模型详解，自己学习总结的，希望对你有用。自己也做个笔记
CSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rar
盒子模型概述;认识盒子模型;认识盒子模型;认识盒子模型;认识盒子模型;div标记;div标记;div标记;div标记;盒子的大小;盒子的大小;盒子的大小;总结;;THANKS
本章将介绍CSS3中各种盒的知识点；主要包含以下内容： CSS3中各种各样盒的类型概念、浏览器支持情况； 当盒中内容超出容纳范围时，如何利用属性来让浏览器按照自己想要的方式对盒中内容进行显示； 掌握给盒添加阴影...
CSS盒模型的应用知识介绍，基础的CSS盒模型教学
CSS盒子模型结构
这里面有三张图片详细讲解了关于CSS中的盒子模型，我觉得这是理解盒子模型最好的三张图片
通过这个css盒子模型的实战，更好的理解css盒子模型
css盒模型难点
本文为大家继续分享CSS3弹性盒模型开发笔记第二篇，之前一篇以及为大家引入了CSS3弹性盒模型的相关介绍，点击查看：CSS3弹性盒模型开发笔记（一） box-flex属性 box-flex属性能够灵活地控制子元素在盒子中的显示空间...