CSS box-align弹性布局使用测试实例页面

展示

回到相关文章 >>

应用的关键CSS值：

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

box-align值：

start
end
center
baseline
stretch

1

2

3

代码

CSS代码：

.test_box {
    display: -moz-box; 
    display: -webkit-box;
    display: -o-box; 
    display: box; 
    
    width: 400px; 
    height: 250px;
    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" style="line-height:200px;">2</div>
    <div class="list">3</div>
</div>