<html>
<meta charset=”utf-8″ /><style>.wrap {display: -webkit-box;-webkit-box-orient: horizontal;}.child {min-height: 200px;border: 2px solid #666;-webkit-box-flex: 1;margin: 10px;font-size: 100px;font-weight: bold;font-family: Georgia;-webkit-box-align: center;}</style><div class="wrap"><div class="child">1</div><div class="child">2</div><div class="child">3</div></div>
</html>
如图：
<!DOCTYPE html><html>
<meta charset=”utf-8″ />
<style>
.wrap {display: -webkit-box;-webkit-box-orient: horizontal;}
.child {min-height: 200px;border: 2px solid #666;margin: 10px;font-size: 40px;font-weight: bold;font-family: Georgia;-webkit-box-align: center;}
.w200 {width: 200px}.flex1 {-webkit-box-flex: 1}.flex2 {-webkit-box-flex: 2}
</style>
<div class="wrap"><div class="w200 child">200px</div><div class="flex1 child">比例1</div><div class="flex2 child">比例2</div></div>
</html>
如图：
<!DOCTYPE html><html><meta charset=”utf-8″ />
<style>
header, footer,section {border: 10px solid #333;font-family: Georgia;font-size: 40px;text-align: center;margin: 10px;-webkit-box-flex:1;}
#doc {height: 100%;display: -webkit-box;-webkit-box-orient: vertical;margin: 0 auto;}
header,footer {min-height: 100px;-webkit-box-flex: 1;}
#content {min-height: 400px;display: -webkit-box;-webkit-box-orient: horizontal;}
.w200 {width: 200px}.flex1 {-webkit-box-flex: 1}.flex2 {-webkit-box-flex: 2}.flex3 {-webkit-box-flex: 3}
</style>
<div id="doc"><header>Header</header><div id="content"><section>定宽200</section><section>比例3</section><section>比例1</section></div><footer>Footer</footer></div>
</html>
如图：
原文地址：http://blog.csdn.net/meiminjun2012/article/details/44219791
