CSS3弹性伸缩布局——box布局与flex布局

2009年，W3C提出了一种崭新的方案----Flex布局（即弹性伸缩布局），它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端的布局，所以本次主要讲解一下旧版本和新版本在移动端使用的各个知识点，让大家对神秘的flex布局熟悉起来。

旧版本（box）

首先看一下浏览器兼容情况：

PS：浏览器兼容数据不一定很准确，不过相差不大。

下面将通过一个简单的实例来讲解旧版本的各个属性：

html代码：

<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</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 ： 伸缩项目沿着内联轴排列显示
• block-axis ： 伸缩项目沿着块轴排列显示

大家不妨试一下：horizontal 和 inline-axis 都是水平排列，而vertical 和 block-axis 都是垂直排列。

box-direction属性

box-direction 属性主要是设置伸缩容器中的流动顺序。

div{
    display:-webkit-box;
    display:box;
    -webkit-box-direction:reverse;
    box-direction:reverse;
}

这样我们的排序就是反序的了，运行结果为：

此属性的属性值有：

• normal  : 正常顺序，默认值
• reverse : 反序

box-pack属性

box-pack 属性用于伸缩项目的分布方式。

此属性的属性值有：

• start   :  伸缩项目以起始点靠齐
•   end   :  伸缩项目以结束点靠齐
• center :  伸缩项目以中心点靠齐
• justify  :  伸缩项目平局分布

下面我们都试一下各个属性值的效果：

1.start属性值

div{
    -webkit-box-pack:start;
    box-pack:start;
}

这个就是默认靠齐方式：

2.end属性值

div{
    -webkit-box-pack:

end

;
    box-pack:

end

;
}

这个就是以结束点靠齐：

3.center属性值

div{
    -webkit-box-pack:

center

;
    box-pack:

center

;
}

这就是居中对齐效果：

4.justify属性值

div{
    -webkit-box-pack:

justify

;
    box-pack:

justify

;
}

这个就是平均分布效果：

PS:垂直方向上也是一样的原理，但如果height为auto的话，效果将出不来。所以需要给height设置一个定高（最好比默认情况高）。这时，就能看到在垂直方向上的效果了。这里我就不再赘述了。

box-align属性

box-align 属性用来处理伸缩容器的额外空间。

此属性的属性值有：

•      start  ： 伸缩项目以顶部为基准，清理下部额外空间
•      end    ： 伸缩项目以底部为基准，清理上部额外空间
•    center ： 伸缩项目以中部为基准，平均清理上下部额外空间
• baseline ： 伸缩项目以基线为基准，清理额外的空间
• stretch  ： 伸缩项目填充整个容器，默认值

同样的，我们将试一下每个属性值的效果：

1.start属性值

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:start;
    box-align:start;
}

效果如下：

2.end属性值

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:

end

;
    box-align:

end

;
}

效果如下：

3.center属性值

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:

center

;
    box-align:

center

;
}

效果如下：

4.baseline属性值

如果box-orient是内嵌单轴或横向，所有的子元素都置于他们的基线对齐。

div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:horizontal;
    box-orient:horizontal;
    -webkit-box-align:baseline;
    box-align:baseline;
}

效果如下：

而如果box-orient是块轴或者垂直方向的，那么所有的子元素都将居中垂直排列。

div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:

vertical

;
    box-orient:vertical;
    -webkit-box-align:baseline;
    box-align:baseline;
}

效果如下：

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;
}

效果如下：

当然也可以有些项目是固定宽度的，那么其他的项目也会分配剩余的宽度，比如这里第一个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;
    height:200px;
}

那么这时的效果就是：

-----------------------------------------------------------------------------------------------------------------------------

新版本的Flexbox模型是2012年9月提出的工作草案，这个草案是由W3C 推出的最新语法。这个版本立志于指定标准，让新式的浏览器全面兼容，在未来浏览器的更新换代中实现统一。

这里我们还是继续上一篇博客中的例子，使用最新版本的flex布局来实现相同的效果。

html代码：

<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>

基础的css代码：

p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}

此时我们给div元素设置display属性为flex :

div{
    display:flex;
}

刷新浏览器后的效果是：

可以看到效果跟旧版本的-webkit-box是一样的。

在新版本中设置为弹性伸缩盒的display属性值有两个：

• flex ： 将容器盒模型作为块级弹性伸缩盒显示
• inline-flex ： 将容器盒模型作为内联级弹性伸缩盒显示

看一下新版本的flex布局的浏览器兼容情况：

PS：可以看到，在一些比较旧的webkit内核的浏览器（Chrome，Safari）中，我们需要使用-webkit-flex来做兼容，但是这里我就省略了。

下面将逐一介绍flex布局的各个属性的基础用法：

flex-direction属性

flex-direction属性用于设置伸缩项目的排列方式。

div{
    display:flex;
    flex-direction:column;
}

效果如下：

结果就是容器内的所有项目按照从上到下排列的。

当你设置为row-reverse时，效果就是：

这个是从浏览器的右边往左边排列的。

此属性的属性值有：

• row ： 设置从左到右排列
• row-reverse ： 设置从右到左排列
• column ： 设置从上到下排列
• column-reverse ： 设置从下到上排列

大家不妨都试一下，看看每一个的效果如何。

flex-wrap属性

flex-wrap属性设置项目的换行方式（当容器宽度不足以容纳所有子项目时）。

div{
    display:flex;
    flex-wrap:wrap;
}

此时结果如下：

可以看到，当我把浏览器窗口缩小时，第三个p元素因为容纳不下而被挤下来了。

此属性的属性值有：

• nowrap ： 默认值，都在一行或者一列中显示
• wrap ： 伸缩项目无法容纳时，自动换行
• wrap-reverse ： 伸缩项目无法容纳时，自动换行，方向和wrap相反

当我将flex-wrap属性设置为wrap-reverse时，运行后的效果就是变成这样：

flex-flow属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的速记属性。

div{
    display:flex;
    flex-flow:row wrap;
}

上面这个例子就相当于设置了flex-direction为row，flex-wrap为wrap。效果就是这样的：

justify-content属性

justify-content 在当灵活容器内的各项没有占用主轴上所有可用的空间时对齐容器内的各项（水平）。

div{
    display:flex;
    justify-content:space-around;
}

效果如下：

可以看到所有项目平均分布，而且两端也有保留一半的空间。

此属性的属性值有：

• flex-start ： 伸缩项目以起始点靠齐
• flex-end ： 伸缩项目以结束点靠齐
• center ： 伸缩项目以中心点靠齐
• space-between ： 伸缩项目平均分布
• space-around ： 伸缩项目平均分布，但两端保留一半的空间

因为这些效果还是很容易就理解了，这里我就不一一演示了。

align-items属性

align-items 属性规定灵活容器内的各项的默认对齐方式，和旧版本中的box-align一样，处理伸缩项目容器的额外空间。

div{
    display:flex;
    align-items:center;
}

效果如下：

那么，此属性的属性值有：

• flex-start ： 伸缩项目以顶部为基准，清理下部的额外空间
• flex-end ： 伸缩项目以底部为基准，清理上部的额外空间
• center ： 伸缩项目以中部为基准，平均清理上下部的额外空间
• baseline ： 伸缩项目以基线为基准，清理额外的空间
• stretch ： 伸缩项目填充整个容器，默认值

这些效果跟旧版本的box-align基本是一样的，具体怎么用，大家自己试一下就知道了。

align-self属性

align-self 和align-items 一样，都是清理额外空间，但它是单独设置某一个伸缩项目的。所有的值和align-itmes 一致。

p:nth-child(2){
    align-self:center;
}

此时的效果就是：

其他属性值的效果同align-items，这里就不赘述。

flex属性

flex 属性和旧版本中的box-flex 类似，用来控制伸缩容器的比例分配。

p:nth-child(1) {
flex: 1;
}
p:nth-child(2) {
flex: 3;
}
p:nth-child(3) {
flex: 1;
}

效果如下：

order属性

order 属性和旧版本的box-ordinal-group 属性一样控制伸缩项目出现的顺序。

p:nth-child(1) {
    order: 2;
}
p:nth-child(2) {
    order: 3;
}
p:nth-child(3) {
    order: 1;
}

效果如下：

 

总结

flex布局虽然目前的兼容性还不是很好，不过未来肯定是很热的布局方式。自己也是最近才接触flex布局，为了巩固这些基本的知识点，我就写了这两篇博客。虽然我知道自己总结得不是很好，但主要还是为了方便自己和那些还没接触过flex布局的博友们。

最后

在这里我推荐一下阮一峰写的两篇关于flex布局的博客，写得非常好：

Flex 布局教程：语法篇：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 布局教程：实例篇：

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

转载自：https://www.cnblogs.com/jr1993/p/4751410.html