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

展示

回到相关文章 >>
1
2
3

代码

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;
    -moz-box-ordinal-group: 1; 
    -webkit-box-ordinal-group: 1; 
    box-ordinal-group: 1;
}
.list_two{
    -moz-box-flex: 2; 
    -webkit-box-flex: 2; 
    box-flex: 2;
    -moz-box-ordinal-group: 2; 
    -webkit-box-ordinal-group: 2; 
    box-ordinal-group: 2;
}
            
HTML代码:
<div class="test_box">
    <div class="list list_two">1</div>
    <div class="list list_one">2</div>
    <div class="list list_one">3</div>
</div>
            
分享到:0