CSS3弹性伸缩布局之box布局

此属性的属性值有：

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

1.start属性值

XML/HTML Code复制内容到剪贴板

div{   

    display:-webkit-box;   

    display:box;   

    -webkit-box-align:start;   

    box-align:start;   

}  

效果如下：

2.end属性值

XML/HTML Code复制内容到剪贴板

div{   

    display:-webkit-box;   

    display:box;   

    -webkit-box-align:   

end   

;   

    box-align:   

end   

;   

}  

效果如下：

3.center属性值

XML/HTML Code复制内容到剪贴板

div{   

    display:-webkit-box;   

    display:box;   

    -webkit-box-align:   

center   

;   

    box-align:   

center   

;   

}  

效果如下：

4.baseline属性值

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

XML/HTML Code复制内容到剪贴板

div{   

    display:-webkit-box;   

    display:box;   

    -webkit-box-orient:horizontal;   

    box-orient:horizontal;   

    -webkit-box-align:baseline;   

    box-align:baseline;   

}   

效果如下：

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

XML/HTML Code复制内容到剪贴板

div{   

    display:-webkit-box;   

    display:box;   

    -webkit-box-orient:   

vertical   

;   

    box-orient:vertical;   

    -webkit-box-align:baseline;   

    box-align:baseline;   

}  

效果如下：

5.stretch属性值

所有子元素拉伸以填充包含区块。

XML/HTML Code复制内容到剪贴板

div{   

    display:-webkit-box;   

    display:box;   

    -webkit-box-align:   

stretch   

;   

    box-align:   

stretch   

;   

}  

效果如下：

box-flex属性

box-flex 属性可以使用浮点数分配伸缩项目的比例。此属性是给容器内的项目设置的，它们会基于父容器的宽度来分配它们所占的比例：

XML/HTML Code复制内容到剪贴板

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元素设置为固定宽度：

XML/HTML Code复制内容到剪贴板

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 属性可以设置伸缩项目的显示位置。

XML/HTML Code复制内容到剪贴板

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，那么旧版本的所有属性就简单的介绍完了，更多结合的用法还是根据需要自己多动手去练习一下。

这里举一个水平垂直居中的例子：

XML/HTML Code复制内容到剪贴板

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元素设置一个固定的高度：

XML/HTML Code复制内容到剪贴板

p{   

    width:150px;   

    height:200px;   

}  

那么这时的效果就是：

是不是很轻松就实现了这种效果呢！

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!