亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

幾個CSS3的flex彈性盒模型布局的簡單例子演示

qiangck   發(fā)布時間：2016-05-12 12:00:09   作者：qiangck   我要評論
這篇文章主要介紹了幾個CSS3的flex彈性盒模型布局的簡單例子演示,flex布局是迄今為止最強(qiáng)大的web布局方式,需要的朋友可以參考下

Flexible Box(彈性盒子)能讓頁面的分布更合理和方便，
這是之前使用常規(guī)的布局方式所做不到的。
2016512120032949.png (700×368)

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="warp">  
  2.     <div class="modular">1</div>  
  3.     <div class="modular">2</div>  
  4.     <div class="modular">3</div>  
  5.     <div class="modular">4</div>  
  6. </div>  

display:flex和display:box有什么區(qū)別？

前者是flex 2012年的語法，也將是以后標(biāo)準(zhǔn)的語法，大部分瀏覽器已經(jīng)實現(xiàn)了無前綴版本。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*父級*/  
  2. .warp{   
  3.     width: 100%;   
  4.     height: 100px;   
  5.     /*這個是用來定義伸縮容器，是內(nèi)聯(lián)還是塊取決于設(shè)置的值。*/  
  6.     /*這個時候，他的所有子元素將變成flex文檔流，稱為伸縮項目。*/  
  7.     /*-------------------------------------------------------------*/  
  8.     display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
  9.     display: -moz-box; /* Firefox 17- */  
  10.     display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
  11.     display: -moz-flex; /* Firefox 18+ */  
  12.     display: -ms-flexbox; /* IE 10 */  
  13.     display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */  
  14.     /*-------------------------------------------------------------*/  
  15.     /*一起使用box-align 和 box-pack 屬性，對子元素進(jìn)行居中*/  
  16.     -webkit-box-pack:justify;   
  17.     -webkit-box-align: ustify;   
  18.     -moz-box-pack:justify;   
  19.     -moz-box-align:justify;   
  20.     box-pack:justify;   
  21.     box-align:justify;   
  22.     /*-------------------------------------------------------------*/  
  23.     /*定義了伸縮項目放置在伸縮容器的方向*/  
  24.     flex-direction:row;   
  25.     -webkit-flex-direction:row;   
  26.     /*定義伸縮容器里是單行還是多行顯示*/  
  27.     flex-wrap:nowrap;   
  28.     /*flex-direction”和“flex-wrap”屬性的縮寫版本,默認(rèn)row nowrap*/  
  29.     flex-flow:row nowrap;   
  30.     /*設(shè)置伸縮容器在橫向方向上的對齊方式。*/  
  31.     justify-content:center;   
  32.     /*設(shè)置伸縮容器在縱向方向上的對齊方式。*/  
  33.     align-items:center;   
  34.     /*當(dāng)伸縮容器的縱向還有多余空間時，可以用來調(diào)準(zhǔn)伸縮容器橫向在伸縮容器里的對齊方式*/  
  35.     align-content:center;   
  36. }      
  37. /*子級*/  
  38. .warp .modular{   
  39.     width:80px;   
  40.     height:80px;   
  41.     background-color:#eee;   
  42.     text-align:center;   
  43.     /*設(shè)置伸縮項目出現(xiàn)的順序。*/  
  44.     order:-1;   
  45.     /*設(shè)置伸縮項目擴(kuò)展的比例。*/  
  46.     flex-grow:1;   
  47.     /*設(shè)置伸縮項目收縮的比例。*/  
  48.     flex-shrink:2;   
  49.     /*設(shè)置伸縮項目的伸縮基準(zhǔn)值。*/  
  50.     flex-basis:auto;   
  51.     /*flex-grow”、“flex-shrink”和“flex-basis”三個屬性的縮寫*/  
  52.     flex:1 2 100px;   
  53.     /*用來在單獨(dú)的伸縮項目上覆寫默認(rèn)的對齊方式。*/  
  54.     align-self:center;   
  55. }  

直接上代碼，寫了個Demo便于理解,其中warp為父元素，稱為“伸縮容器，modular為子元素，稱為“伸縮項目”。

1) Flexbox布局最適合應(yīng)用程序的組件和小規(guī)模的布局，而網(wǎng)格布局更適合那些更大規(guī)模的布局。

2) 目前沒有瀏覽器支持 box-flex 屬性，F(xiàn)irefox 支持替代的 -moz-box-flex 屬性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 屬性。

3) CSS的columns在伸縮容器上沒有效果。

4) float、clear和vertical-align在伸縮項目上沒有效果。

例：移動端導(dǎo)航（居中，左右，自適應(yīng)居中，自適應(yīng)豎向排列）

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2.     .nav{   
  3.         background:#00BFFF;   
  4.         display:-webkit-box;   
  5.         display:-moz-box;   
  6.         display:-ms-flexbox;   
  7.         display:-webkit-flex;   
  8.         display:flex;   
  9.         -webkit-flex-flow:row wrap;   
  10.         /*自適應(yīng)豎向排列*/  
  11.         -webkit-flex-flow:column wrap;   
  12.         /* 所有列面向主軸起始位置靠齊 */  
  13.         justify-content:flex-start;   
  14.         /* 所有列面向主軸終點(diǎn)位置靠齊 */  
  15.         justify-content:flex-end;   
  16.     }   
  17.     .nav a{   
  18.         text-decoration:none;   
  19.         display:block;   
  20.         padding:1em;   
  21.         color:#fff;   
  22.         /*居中平鋪*/  
  23.         flex:1;   
  24.     }   
  25.     @media all and (max-width: 800px) {   
  26.         .nav{   
  27.             /* 所有列面向主軸兩端位置平均分配 */  
  28.             justify-content:space-around;   
  29.         }   
  30.     }   
  31. </style>  
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <ul class="nav">  
  2.     <li><a href="#">1</a></li>  
  3.     <li><a href="#">2</a></li>  
  4.     <li><a href="#">3</a></li>  
  5.     <li><a href="#">4</a></li>  
  6. </ul>  

2016512120146062.jpg (1074×668)

例：移動端常用自適應(yīng)布局

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2.     .wrapper{   
  3.         display:-webkit-box;   
  4.         display:-moz-box;   
  5.         display:-ms-flexbox;   
  6.         display:-webkit-flex;   
  7.         display:flex;     
  8.         -webkit-flex-flow:row wrap;   
  9.         flex-flow:row wrap;   
  10.     }   
  11.     .wrapper > *{   
  12.         padding:10px;   
  13.         flex:1 100%;   
  14.     }   
  15.     .header{   
  16.         background:#FF6347;   
  17.     }   
  18.     .footer{   
  19.         background:#90EE90;   
  20.     }   
  21.     .main{   
  22.         background:#00BFFF;   
  23.     }   
  24.     .aside-1{   
  25.         background:#FFD700;   
  26.     }   
  27.     .aside-2{   
  28.         background:#FF69B4;   
  29.     }   
  30.     @media all and (min-width: 600px) {   
  31.         .aside{   
  32.             flex:1 auto;   
  33.         }   
  34.     }   
  35.     @media all and (min-width: 800px) {   
  36.         .main{   
  37.             flex:3 0px;   
  38.         }   
  39.         .aside-1{   
  40.             order:1;   
  41.         }    
  42.         .main{   
  43.             order:2;   
  44.         }   
  45.         .aside-2{   
  46.             order:3;   
  47.         }   
  48.         .footer{   
  49.             order:4;   
  50.         }   
  51.     }   
  52. </style>  
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="wrapper">  
  2.     <header class="header">頂部</header>  
  3.     <article class="main">  
  4.         <p>我在中間顯示的文字</p>     
  5.     </article>  
  6.     <aside class="aside aside-1">我在左邊顯示的文字</aside>  
  7.     <aside class="aside aside-2">我在右邊顯示的文字</aside>  
  8.     <footer class="footer">底部</footer>  
  9. </div>  

2016512120225379.jpg (872×665)

相關(guān)文章

  • 純CSS3彈性框布局實現(xiàn)的漸變色波動列動畫效果源碼

    這是一款基于純CSS3彈性框布局實現(xiàn)的漸變色波動列動畫效果源碼。畫面中的5塊漸變色區(qū)域連續(xù)排列在一起，并呈現(xiàn)出此消彼漲的彈性波動變換動畫效果
    2018-08-07

  • css flex 彈性布局詳解

    這篇文章主要介紹了css flex 彈性布局詳解的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-02

  • CSS3彈性布局內(nèi)容對齊（justify-content）屬性使用詳解

    這篇文章主要介紹了CSS3彈性布局內(nèi)容對齊（justify-content）屬性使用詳解,具有一定的參考價值，有興趣的可以了解一下
    2017-07-31

  • CSS3彈性伸縮布局之box布局

    這篇文章主要為大家詳細(xì)介紹了CSS3彈性伸縮布局之box布局，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-07-12

  • 實例講解CSS3中的box-flex彈性盒屬性布局

    flex布局毫無疑問是當(dāng)今Web頁面的最強(qiáng)大布局方式,box-flex彈性盒模型是其中的一個代表,這里我們就來以實例講解CSS3中的box-flex彈性盒模型布局
    2023-06-22

  • CSS3彈性盒模型flex box快速入門心得(必看篇)

    下面小編就為大家?guī)硪黄狢SS3彈性盒模型flex box快速入門心得(必看篇)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-24

  • 基礎(chǔ)的CSS3彈性盒Flexbox布局使用實例

    這篇文章主要介紹了基礎(chǔ)的CSS3彈性盒Flexbox布局使用實例,文中最后也提到了解決兼容性問題的基本方法,需要的朋友可以參考下
    2016-04-08

  • CSS中的EM屬性之彈性布局

    這篇教程將引導(dǎo)大家如何使用“em”來創(chuàng)建一個基本的彈性布局，從而學(xué)習(xí)其如何計算？又是如何使用“em”對層進(jìn)行彈性擴(kuò)展？又是如何擴(kuò)展文本和圖像等內(nèi)容？下在我們就一起帶
    2013-04-07

  • CSS3 Flex 彈性布局實例代碼詳解

    這篇文章主要介紹了CSS3 Flex 彈性布局實例代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-11-01

最新評論