弹性盒模型案例讲解

96
行走的巨象
2017.07.06 22:30* 字数 372

弹性盒模型的设置的方法为display:box 或display:inline-box
box-orient 为定义盒模型的布局方向,由于盒模型的只有在webkit或moz的内核才生效,故我们在使用这个属性之前要在它前面加上-webkit-或-moz-
box-orient的属性值有horizontal(水平),vertical(垂直)
下方代码是块状元素水平排列的,大家可以自己尝试一下改为垂直排列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width: 900px;
                height: 600px;
                border: 1px solid #CCCCCC;
                display: -webkit-box;
                -webkit-box-orient: horizontal;
            }
            .box div{
                text-align: center;
                margin: 10px;
                width: 100px;
                height: 100px;
                line-height: 100px;
                color: #FFFFFF;
                background: #00A72B;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
        
    </body>
</html> 
css3_box1.png

box-direction 为元素的排列顺序,属性值normal表示正序,reverse表示反序

    <style>
        .box{
            width: 800px;
            height: 600px;
            border: 1px solid #CCCCCC;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse; /*元素排列顺序*/
        }
        .box div{
            text-align: center;
            margin: 10px;
            width: 100px;
            height: 100px;
            line-height: 100px;
            color: #FFFFFF;
            background: #00A72B;
        }
    </style>  
css3_box2.png

box-ordinal-group 设置元素的具体位置

        <style>
            .box{
                width: 800px;
                height: 600px;
                border: 1px solid #CCCCCC;
                display: -webkit-box;
                -webkit-box-orient: horizontal;
            }
            .box div{
                text-align: center;
                margin: 10px;
                width: 100px;
                height: 100px;
                line-height: 100px;
                color: #FFFFFF;
                background: #00A72B;
            }
            .box div:nth-of-type(6){    /*把第六个div放到第一位,以此类推*/
                -webkit-box-ordinal-group: 1;
            }
            .box div:nth-of-type(5){
                -webkit-box-ordinal-group: 2;
            }
            .box div:nth-of-type(4){
                -webkit-box-ordinal-group: 3;
            }
            .box div:nth-of-type(1){
                -webkit-box-ordinal-group: 6;
            }
            .box div:nth-of-type(2){
                -webkit-box-ordinal-group: 5;
            }
            .box div:nth-of-type(3){
                -webkit-box-ordinal-group: 4;
            }
        </style>  
css3_box2.png

box-flex 定义盒子的弹性空间
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

        <style>
            .box{
                width: 800px;
                height: 600px;
                border: 1px solid #CCCCCC;
                display: -webkit-box;
                -webkit-box-orient: horizontal;
            }
            .box div{
                text-align: center;
                margin: 10px;
                width: 100px;
                height: 100px;
                line-height: 100px;
                color: #FFFFFF;
                background: #00A72B;
            }
            .box div:nth-of-type(1){
                -webkit-box-flex: 1;    /*如果所有数字都一样,则横向平均分布*/
            }
            .box div:nth-of-type(2){
                -webkit-box-flex: 1;
            }
            .box div:nth-of-type(3){
                -webkit-box-flex: 1;
            }
            .box div:nth-of-type(4){
                -webkit-box-flex: 1;
            }
            .box div:nth-of-type(5){
                -webkit-box-flex: 1;
            }
            .box div:nth-of-type(6){
                -webkit-box-flex: 1;
            }
        </style>
css3_box3.png
        <style>
            .box{
                width: 800px;
                height: 600px;
                border: 1px solid #CCCCCC;
                display: -webkit-box;
                -webkit-box-orient: horizontal;
            }
            .box div{
                text-align: center;
                margin: 10px;
                height: 100px;
                line-height: 100px;
                color: #FFFFFF;
                background: #00A72B;
            }
            .box div:nth-of-type(1){
                -webkit-box-flex: 1;        /*占整体1/9*/
            }
            .box div:nth-of-type(2){        /*占整体1/9*/
                -webkit-box-flex: 1;
            }
            .box div:nth-of-type(3){        /*此div占整体5/9*/
                -webkit-box-flex: 5;
            }
            .box div:nth-of-type(4){        /*占整体1/9*/
                -webkit-box-flex: 1;
            }
            .box div:nth-of-type(5){        /*占整体1/9*/
                -webkit-box-flex: 1;
            }
            
        </style>  
css3_box4.png

box-pack 对盒子富裕的空间进行管理
start 所有子元素在盒子左侧显示,富裕空间在右侧
end 所有子元素在盒子右侧显示,富裕空间在左侧
center 所有子元素居中
justify 富余空间在子元素之间平均分布
以下案例只展示center和justify,其余请自行尝试

        <style>
            .box{
                width: 800px;
                height: 600px;
                border: 1px solid #CCCCCC;
                display: -webkit-box;
                -webkit-box-orient: horizontal;
                -webkit-box-pack: center;
            }
            .box div{
                text-align: center;
                width: 100px;
                margin: 10px;
                height: 100px;
                line-height: 100px;
                color: #FFFFFF;
                background: #00A72B;
            }
            
        </style> 
css3_box5.png
    <style>
            .box{
                width: 800px;
                height: 600px;
                border: 1px solid #CCCCCC;
                display: -webkit-box;
                -webkit-box-orient: horizontal;
                -webkit-box-pack: justify;
            }
            .box div{
                text-align: center;
                width: 100px;
                margin: 10px;
                height: 100px;
                line-height: 100px;
                color: #FFFFFF;
                background: #00A72B;
            }
            
        </style>  
css3_box6.png

box-align 在垂直方向上对元素的位置进行管理
start 所有子元素在据顶
end 所有子元素在据底
center 所有子元素居中

        <style>
            .box{
                width: 800px;
                height: 600px;
                border: 1px solid #CCCCCC;
                display: -webkit-box;
                -webkit-box-orient: horizontal;
                -webkit-box-align: center;
            }
            .box div{
                text-align: center;
                width: 100px;
                margin: 10px;
                height: 100px;
                line-height: 100px;
                color: #FFFFFF;
                background: #00A72B;
            }
            
        </style>  
css3_box7.png

让div盒子水平垂直居中

    <style>
        .box{
            width: 800px;
            height: 600px;
            border: 1px solid #CCCCCC;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: center;   /*垂直居中*/
            -webkit-box-pack: center;   /*水平居中*/
        }
        .box div{
            text-align: center;
            width: 100px;
            margin: 10px;
            height: 100px;
            line-height: 100px;
            color: #FFFFFF;
            background: #00A72B;
        }
        
    </style>  
css3_box8.png

以上就是我要讲的弹性盒模型,谢谢大家的阅读!

日记本
Web note ad 1