CSS3弹性伸缩布局（⼀）——box布局
CSS3弹性伸缩布局简介
2009年，W3C提出了⼀种崭新的⽅案----Flex布局（即弹性伸缩布局），它可以简便、完整、响应式地实现各种页⾯布局，包括⼀直让⼈很头疼的垂直⽔平居中也变得很简单地就迎刃⽽解
了。但是这个布局⽅式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码⽅式。其中混合过渡版本主要是针对IE10做了兼容。⽬前flex布局⽤得⽐较
多的还是在移动端的布局，所以本次主要讲解⼀下旧版本和新版本在移动端使⽤的各个知识点，让⼤家对神秘的flex布局熟悉起来。
旧版本（box）
⾸先看⼀下浏览器兼容情况：
PS：浏览器兼容数据不⼀定很准确，不过相差不⼤。
下⾯将通过⼀个简单的实例来讲解旧版本的各个属性：
beverleyhtml代码：
<div>
<p>发⽣过的空间还是看价格哈健康啊⽔果和卡刷卡更何况规划哈萨克的⾻灰撒块光辉卡萨很⼲净啊是⾼科技傻空给发⽣过的空间还是看价格哈健康啊⽔果和卡刷卡更何况规划哈萨克的⾻灰撒块光辉卡萨很⼲净啊是<p>发⽣过的空间还是看价格哈健康啊⽔果和卡刷卡更何况规划哈萨克的⾻灰撒块光辉卡萨很⼲净啊是⾼科技傻空给</p>
<p>发⽣过的空间还是看价格哈健康啊⽔果和卡刷卡更何况规划</p>
</div>
可以看到我们这个例⼦是很简单的，⼀个div元素内包含三个p元素，它们都是块元素（block）。接下来给段落加⼀些基础的样式：
p{
width:150px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
}
此时刷新⽹页看到的结果是这样的：
这个结果很正常吧！OK，现在我们给div元素设置为box，看看有什么变化：
div{
display:-webkit-box;
display:box;
}
我们再次刷新⽹页，结果是这样的：
看到了吧，现在每⼀个p元素都变成⼀个box了，这就是弹性布局的神奇所在！
在上⾯中，我们将div元素的display设置为box，这就是旧版本的弹性布局。对于⽐较旧的浏览器版本，我们需要加上-webkit-前缀。
旧版本的弹性布局有两个属性值：
box : 将容器盒模型作为块级弹性伸缩盒显⽰
inline-box : 将容器盒模型作为内联级弹性伸缩盒显⽰
PS：我们知道块级它是占⽤整⾏的，⽐如div元素；⽽内联级不占⽤整⾏，⽐如span元素。但是我们设置了整个盒⼦，他们都不占⽤，保持⼀致。就像我们上⾯的例⼦⼀样，给div元素设置
了盒⼦，那么div元素⾥⾯的p元素就不占⽤了。
下⾯介绍旧版本弹性布局的各个属性：
box-orient 属性
box-orient属性主要实现盒⼦内部元素的流动⽅向。
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
}
此时的结果就是垂直排列：
此属性的属性值有：
horizontal ：伸缩项⽬从左到右⽔平排列
vertical ：伸缩项⽬从上到下垂直排列
inline-axis ：伸缩项⽬沿着内联轴排列显⽰
conversationsblock-axis ：伸缩项⽬沿着块轴排列显⽰
tic toc⼤家不妨试⼀下：horizontal 和 inline-axis 都是⽔平排列，⽽vertical 和 block-axis 都是垂直排列。
box-direction属性
box-direction 属性主要是设置伸缩容器中的流动顺序。
div{
display:-webkit-box;
display:box;
-webkit-box-direction:rever;
box-direction:rever;
}
这样我们的排序就是反序的了，运⾏结果为：
此属性的属性值有：
normal : 正常顺序，默认值
rever : 反序
box-pack属性
box-pack 属性⽤于伸缩项⽬的分布⽅式。
此属性的属性值有：
start : 伸缩项⽬以起始点靠齐
end : 伸缩项⽬以结束点靠齐
center : 伸缩项⽬以中⼼点靠齐
justify : 伸缩项⽬平局分布
下⾯我们都试⼀下各个属性值的效果：
1.start属性值
div{
-webkit-box-pack:start;
box-pack:start;
}
这个就是默认靠齐⽅式：
div{
-webkit-box-pack:
end
;
box-pack:
end
;
}
这个就是以结束点靠齐：
<属性值
div{
-webkit-box-pack:
center
;
box-pack:
corrective
center
;
}
这就是居中对齐效果：
4.justify属性值
climate怎么读div{
-webkit-box-pack:
justify
;
box-pack:
justify
;
}
这个就是平均分布效果：
PS：垂直⽅向上也是⼀样的原理，但如果height为auto的话，效果将出不来。所以需要给height设置⼀个定⾼（最好⽐默认情况⾼）。这时，就能看到在垂直⽅向上的效果了。这⾥我就不再赘述了。
box-align属性
box-align 属性⽤来处理伸缩容器的额外空间。
此属性的属性值有：
start ：伸缩项⽬以顶部为基准，清理下部额外空间
end ：伸缩项⽬以底部为基准，清理上部额外空间
center ：伸缩项⽬以中部为基准，平均清理上下部额外空间
baline ：伸缩项⽬以基线为基准，清理额外的空间
stretch ：伸缩项⽬填充整个容器，默认值
同样的，我们将试⼀下每个属性值的效果：
1.start属性值
div{
display:-webkit-box;
display:box;
-webkit-box-align:start;
box-align:start;
}
效果如下：
div{
display:-webkit-box;
display:box;
-webkit-box-align:
end
;
box-align:
end
;
}
效果如下：
<属性值
div{
display:-webkit-box;
display:box;
-webkit-box-align:
center
;
box-align:
center
;
}
效果如下：
4.baline属性值
如果box-orient是内嵌单轴或横向，所有的⼦元素都置于他们的基线对齐。
div{
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:baline;
box-align:baline;
}
效果如下：
⽽如果box-orient是块轴或者垂直⽅向的，那么所有的⼦元素都将居中垂直排列。
div{
display:-webkit-box;
副词修饰display:box;
-webkit-box-orient:
vertical
;
box-orient:vertical;
-webkit-box-align:baline;
box-align:baline;
}
效果如下：
5.stretch属性值
所有⼦元素拉伸以填充包含区块。
div{
display:-webkit-box;
display:box;
-webkit-box-align:
stretch
;
box-align:
stretch
;
}
效果如下：
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;
}mannish
效果如下：
当然也可以有些项⽬是固定宽度的，那么其他的项⽬也会分配剩余的宽度，⽐如这⾥第⼀个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，那么旧版本的所有属性就简单的介绍完了，更多结合的⽤法还是根据需要⾃⼰多动⼿去练习⼀下。
这⾥举⼀个⽔平垂直居中的例⼦：
div{
display:-webkit-box;
display:box;
height:500px;
border:1px solid #f00;
-webkit-box-pack:center;
box-pack:center;
-webkit-box-align:center;
box-align:center;
}
那么效果就是这样的了：
此时我们再给p元素设置⼀个固定的⾼度：
p{
width:150px;
tageheight:200px;
}
那么这时的效果就是：
是不是很轻松就实现了这种效果呢！
⼩结
好的，到这⾥旧版本的弹性布局基础知识点就都介绍了⼀下。由于篇幅过长，怕⼤家看着疲劳，新版本的弹性布局（flex）我将放在下⼀篇博客介绍。希望能帮到⼤家，同时尽请关注！若需转载，请注明出处，谢谢合作！
