教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

ui培訓之流式布局彈性盒模型(三)

更新時間:2016年05月06日15時32分 來源:傳智播客UI培訓學院 瀏覽次數(shù):

三、 特殊的彈性布局

在手機頁面制作中，我們經常會遇見一種特殊的布局形式。比如下圖所示，中間的部分是百分比的寬度，而左右兩端是固定布局。這是如何做到的呢？
方法1：傳統(tǒng)絕對定位的方法
 
方法2：
CSS3中的彈性盒屬性：給父親設置display:-webkit-box;表示自己的內部兒子是彈性盒。給子元素設置-webkit-box-flex屬性，用數(shù)值表示比例。
  1. div{
  2. width: 800px;
  3. height: 100px;
  4. margin: 100px auto;
  5. background-color: pink;
  6. /*要把盒子變成彈性盒模型:*/
  7. display: -webkit-box;  
  8. }
  10. /*所有的p，既沒有寬度，也沒有浮動*/
  11. div p:nth-child(1){
  12. background-color: red;
  13. -webkit-box-flex:1;
  14. }
  15. div p:nth-child(2){
  16. background-color: blue;
  17. -webkit-box-flex:2;
  18. }
  19. div p:nth-child(3){
  20. background-color: green;
  21. -webkit-box-flex:3;
  22. }
 
高度的等比例變化。

本文版權歸傳智播客UI培訓學院所有，歡迎轉載，轉載請注明作者出處。謝謝！
作者：傳智播客UI培訓學院
首發(fā)：http://www.xamj520.com/ui 
0 分享到：
和我們在線交談！