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

全國(guó)咨詢(xún)/投訴熱線(xiàn)：400-618-4000

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

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

三、 特殊的彈性布局

在手機(jī)頁(yè)面制作中，我們經(jīng)常會(huì)遇見(jiàn)一種特殊的布局形式。比如下圖所示，中間的部分是百分比的寬度，而左右兩端是固定布局。這是如何做到的呢？
方法1：傳統(tǒng)絕對(duì)定位的方法
 
方法2：
CSS3中的彈性盒屬性：給父親設(shè)置display:-webkit-box;表示自己的內(nèi)部?jī)鹤?/strong>是彈性盒。給子元素設(shè)置-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，既沒(méi)有寬度，也沒(méi)有浮動(dòng)*/
  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. }
 
高度的等比例變化。

本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://xamj520.com/ui 
0 分享到：
和我們?cè)诰€(xiàn)交談！