成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于CSS3 flex布局，這樣簡單做就好了。

RyanHoo / 2278人閱讀

摘要：布局在移動端會用得比較廣泛，例如導(dǎo)航欄，菜單欄等，以支付寶，淘寶為例。看了網(wǎng)上很多關(guān)于布局，有些寫得太亂了，也太復(fù)雜了。那么用布局，就是這樣布局上面給每個用劃分，一共分份，占，那就是占，那就是這個容易理解吧。

flex布局在移動端會用得比較廣泛，例如導(dǎo)航欄，菜單欄等，以支付寶，淘寶APP為例。

看了網(wǎng)上很多關(guān)于flex布局，有些寫得太亂了，也太復(fù)雜了。

寫一個導(dǎo)航欄，5個導(dǎo)航，用普通得寫法是。 



    Flex布局
    
    



    

  • 1
    • 

  • 2
    • 

  • 3
    • 

  • 4
    • 

  • 5
    •

就沒每個

  • 按照20%平均分，左浮動即可。這種方法是可以實現(xiàn)得，但后面再增加
  • ，例如7個
  • ，那么是下面這樣的。

    很明顯父級元素放不下了，只能被擠下去了。

    那么，用flex布局怎么做呢？有何優(yōu)點？ 
    


    Flex布局
    
    



      

    • 1
      • 

    • 2
      • 

    • 3
      • 

    • 4
      • 

    • 5
      •

    效果是和上面一樣的

    但是當(dāng)我新增7-10個，都不會被擠下去，而是直接在父級元素上面進(jìn)行排列并重新劃分寬度。

    如果要加一個margin-right呢？這個也容易啊，但是最后一個

  • 不貼邊，我們要給最后一個
  • 多帶帶加一個style。

    


    Flex布局
    
    



      

    • 1
      • 

    • 2
      • 

    • 3
      • 

    • 4
      • 

    • 5
      • 

    • 6
      • 

    • 7
      • 

    • 8
      • 

    • 9
      •

    下面再說一個不均等的。

    如上圖，有三個

  • ，每個
  • 都是不均等的，在父級元素用普通的方法就是給不同的百分比。那么用flex布局，就是這樣：

    


    Flex布局
    
    



      

    • 1
      • 

    • 2
      • 

    • 3
      •

    上面給每個

  • 用flex劃分，一共分6份，li_1占1/6，那就是flex:1;li_2占2/6，那就是flex:2;這個容易理解吧。

    下面接著說水平排列方式：

    在父級元素使用justify-content

    justify-content：space-around;/*左右平均分布*/
justify-content：center;/*居中*/
justify-content：space-between;/*兩端分布*/
justify-content：flex-start;/*居左*/
justify-content：flex-end;/*居右*/




    Author：TANKING
    學(xué)習(xí)交流微信：face6009
    web：http://likeyunba.com

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117078.html

    相關(guān)文章

    • 移動端布局與適配

      摘要：實戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配，不同的公司不同的團(tuán)隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格，實際上是你將一個元素聲明為一個網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動端頁面適配—...

      Clect 評論0 收藏0

    • css進(jìn)階

      摘要：柵格系統(tǒng)用于處理頁面多終端適配的問題。它表示抓取對象以后拖放到另一個位置。目前，它是標(biāo)準(zhǔn)的一部分。精簡高效的命名準(zhǔn)則方法這篇文章發(fā)布于年月日，星期日，，歸類于相關(guān)。但是不會受到包含塊的限制，可能會溢出。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 float 屬性不由...

      import. 評論0 收藏0

    • CSS實現(xiàn)水平垂直居中的1010種方式（史上最全）

      摘要：劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題，我就被問過好幾次了要實現(xiàn)上圖的效果看似很簡單，實則暗藏玄機(jī)，本文總結(jié)了一下實現(xiàn)水平垂直居中的方式大概有下面這些，本文將逐一介紹一下，我將本文整理成了一個倉庫，歡迎大家僅居中元素定寬高適 劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題，我就被問過好幾次了 showImg(https://segmentfault.com/im...

      YuboonaZhang 評論0 收藏0

    • CSS實現(xiàn)水平垂直居中的1010種方式（史上最全）

      摘要：劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題，我就被問過好幾次了要實現(xiàn)上圖的效果看似很簡單，實則暗藏玄機(jī)，本文總結(jié)了一下實現(xiàn)水平垂直居中的方式大概有下面這些，本文將逐一介紹一下，我將本文整理成了一個倉庫，歡迎大家僅居中元素定寬高適 劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題，我就被問過好幾次了 showImg(https://segmentfault.com/im...

      OnlyLing 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <