• display:box 盒子显示
• box-align:start end center baseline stretch 上下对齐
• box-pack 左右对齐

<style>
#flex-div {
    width: 100%;border: solid 10px #ccc;
    box-sizing:border-box;
    display: -webkit-box;display: -moz-box;display: box;    
}
#flex-div .d1 {
    border:solid 2px red;padding: 5px;
    -webkit-box-flex:1;box-flex:1;-moz-box-flex:1;
}
#flex-div .d2 {
    border:solid 2px green;padding: 5px;
    -webkit-box-flex:3;box-flex:3;-moz-box-flex:3;

    height: 100px;
    display:-webkit-box;display:-moz-box;display:box;
    -webkit-box-align:center;-moz-box-align:center;-moz-box-pack:center;box-align:center;box-pack:center;
}
</style>

<div id="flex-div">
    <div class="d1">1的宽度</div>
    <div class="d2">3倍宽度</div>
</div>