CSS3弹性盒模型

旧式的弹性盒子方法

1、在拥有盒子的盒子上加display:box; 或 inline-box 开启弹性盒模型

2、box-flex 分配空间，假如容器有a份，box-flex:2，那就占a分之2

3、分布方向水平box-orient: horizontal; 垂直 box-orient:vertical;

4、定义显示顺序：box-ordinal-group

实例(没作兼容)

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>旧弹性盒模型</title>
    <style type="text/css">
     .content{
         width: 1000px;
         display:-webkit-box;
     }
    .content div {
        height: 50px;
        line-height: 50px;
        text-align: center;     
    }
    
    #box1 {
        background: #F69A0B;
         -webkit-box-flex:1; 
         -webkit-box-ordinal-group:2; 
    }
    
    #box2 {
        background: #FE6403;
       -webkit-box-flex:2;
       -webkit-box-ordinal-group:1; 
    }
    
    #box3 {
        background: #02C3F5;
        -webkit-box-flex:3;
        -webkit-box-ordinal-group:3; 
    }
    </style>
</head>

<body>
    <div class="content">
        <div id="box1">box1</div>
        <div id="box2">box2</div>
        <div id="box3">box3</div>
    </div>
</body>

</html>

新式的弹性盒子方法

1、在拥有盒子的盒子上加display:flex; 开启弹性盒模型

2、flex-grow 分配空间，假如容器有a份，box-flex:2，那就占a分之2

3、分布方向水平flex-direction: row; 垂直 flex-direction:column;

4、定义显示顺序：order

实例(没作兼容)-与上面效果相同，只是写法不一样

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>新弹性盒模型</title>
    <style type="text/css">
    .content {
        width: 1000px;
        height: 500px;
        display: -webkit-flex;
    }
    
    .content div {
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    
    #box1 {
        background: #F69A0B;
        -webkit-flex: 1;
        -webkit-flex-grow: 1;
        -webkit-order: 2;
    }
    
    #box2 {
        background: #FE6403;
        -webkit-flex: 2;
        -webkit-flex-grow: 2;
        -webkit-order: 1;
    }
    
    #box3 {
        background: #02C3F5;
        -webkit-flex: 3;
        -webkit-flex-grow: 3;
        -webkit-order: 3;
    }
    </style>
</head>

<body>
    <div class="content">
        <div id="box1">box1</div>
        <div id="box2">box2</div>
        <div id="box3">box3</div>
    </div>
</body>

</html>

注意

display:box; 是在属性值加兼容如 display:-webkit-box;