CSS3响应式布局之弹性盒子

标签：

CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局。同时该盒子决定了一个盒子在其他盒子的分布方式，及如何处理可用的空间。

自己写了一个弹性盒子的demo：

主要HTML代码：

<div class="outer">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>
CSS代码：

<style type="text/css">
    .outer {
        width:500px; height:300px;
        display: -webkit-box; /*使用弹性盒模型*/
        -webkit-box-orient:vertical;/*水平或垂直分布   horizional/vertical*/
        -moz-box-orient:vertical;
        -webkit-box-direction:reverse;/*规定子元素的显示方向 normal/reverse/inherit 默认/相反/继承子元素的box-derection*/
        -moz-box-direction:reverse;
        -webkit-box-align:center;/*规定如何对齐子元素的*/
        -moz-box-align:center;
        -webkit-box-pack:center;/*水平或垂直管理子盒子*/
        -moz-box-pack:center;

    }
    #div1 {
        background-color:darkcyan;
        -webkit-box-flex: 1; /*规定子盒子是否可伸缩，值越大占的空间就越大*/
        -moz-box-flex:1;
    }
    #div2 {
        background-color:darkmagenta;
        -webkit-box-flex:1;
        -moz-box-flex:1;
    }
    #div3 {
        background-color:seagreen;
        -webkit-box-flex:1;
        -moz-box-flex:1;
    }
    #div4 {
        background-color:maroon;
        -webkit-box-flex:1;
        -moz-box-flex:1;;
    }
</style>

在不用 webkit-box-align:center;webkit-box-pack:center;这两个属性的情况下div分布情况；

在使用box-align:center;box-pack:center;情况下，为了方便没写指定内核属性如webkit/moz

最后如有不恰当的地方还希望大家指正；谢谢。

CSS3响应式布局之弹性盒子

标签：

原文地址：http://www.cnblogs.com/leungUwah/p/5058371.html