css box-flex弹性布局使用测试实例页面

展示

代码

CSS代码：

.test_box {
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
    
    width: 800px; 
    margin: 40px auto; 
    padding: 20px; 
    background: #f0f3f9;
 }
.list {
    padding: 0 1em; 
    font: bold 36px/200px monaco; 
    text-shadow: 1px 1px #eee;
}
.list_one {
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1;
}
.list_two {
    -moz-box-flex: 2; 
    -webkit-box-flex: 2; 
    box-flex: 2;
}
.list_w300 { width: 300px; }
            

HTML代码：

<div class="test_box">
    <div class="list list_two">1</div>
    <div class="list list_one">2</div>
    <div class="list list_w300">3</div>
</div>