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

展示

回到相关文章 >>

应用的关键CSS值：

display:-moz-box; display:-webkit-box; display:-o-box; display:box;

box-orient值：

horizontal
vertical
inline-axis
block-axis
inherit

1

2

3

代码

CSS代码：

.test_box {
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
    
    padding: 20px; 
    background: #f0f3f9;
 }
.list {
    padding: 0 1em; 
    font: bold 36px/120px monaco; 
    text-shadow: 1px 1px #eee;
}

HTML代码：

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