日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
你肯定會(huì)用到的CSS多行多列布局

前言：因?yàn)轫?xiàng)目中使用flex過(guò)程中，如果采用space-between兩端對(duì)齊，會(huì)遇到最后一行難以對(duì)齊的問(wèn)題。本文主要對(duì)多行多列這種常見(jiàn)的布局，列出解決方案，方便大家日常開(kāi)發(fā)使用。

創(chuàng)新互聯(lián)建站是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專(zhuān)業(yè)的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。10年品質(zhì)，值得信賴！

話不多說(shuō)，直接進(jìn)入正題：

方案一：標(biāo)簽補(bǔ)位
我們都知道，之所以對(duì)不齊是因?yàn)樽詈笠恍械淖禹?xiàng)目沒(méi)有達(dá)到4個(gè)，space-between的對(duì)齊方式，自然會(huì)把中間空出來(lái)。既然如此，何不直接補(bǔ)位，讓元素排滿4個(gè)。

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.     
 
  •     
    •  
  •     
    •  
  •     
    •  
  •     
    •  
  •     
    •  
  •  
  •     
    •  
  •     
    •  
  •     
    •  
  •  

    效果如下：

    如果子元素個(gè)數(shù)不是4個(gè)怎么辦？我們細(xì)心觀察，不難發(fā)現(xiàn)，最后一行的最小值是1個(gè)，那么我們只需要補(bǔ)位n-1個(gè)即可。如果只有3個(gè)，也可以用偽元素::after去補(bǔ)最后一個(gè)位置。

    方案二：計(jì)算剩余空間
    如果我們知道最后一行剩余空間的話，完全可以控制最后一個(gè)元素的邊距或者縮放比例去占滿剩下的空間，自然就能左對(duì)齊了。要做到這一點(diǎn)，首先得確定寬度和邊距，寬度通常是已知的，我們只需要把邊距確定下來(lái)，就能確認(rèn)剩余空間。

    接上面的的例子，假設(shè)一行有4個(gè)， 每個(gè)占比24%，4個(gè)就是24% * 4 = 96% ， 那么可以確定總邊距是4%，由于一行有4個(gè)元素，而最后一個(gè)的右邊距是多余的，那么可以確定單個(gè)的邊距為 4% / 3 = 1.333% , 計(jì)算出來(lái)后就可以開(kāi)始寫(xiě)代碼了：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.     
     
  •     
    •  
  •      
  •      
  •      
  •      
  •  

    • 效果如下：

    可能有些小伙伴覺(jué)得懶得記，那么下面直接給出封裝好的sass mixin, 復(fù)制即可使用:

     
 
 
 
        
  
  
  
    1. /** 
      2.   
  
  
  
    2.  * 多列布局 
      3.   
  
  
  
    3.  * $count 項(xiàng)目數(shù)量 
      4.   
  
  
  
    4.  * $itemWidth 項(xiàng)目寬度，百分比，不含百分號(hào) 
      5.   
  
  
  
    5.  * $itemHeight 項(xiàng)目高度，隨意 
      6.   
  
  
  
    6.  */ 
      7.   
  
  
  
    7. @mixin grid($count:4, $itemWidth:20, $itemHeight:auto) { 
      8.   
  
  
  
    8.     $rest: 100 - $itemWidth * $count; // 剩余空間 
      9.   
  
  
  
    9.     $space: percentage($rest/($count - 1)/100); // 邊距 
      10.   
  
  
  
    10.     display: flex; 
      11.   
  
  
  
    11.     flex-wrap: wrap; 
      12.   
  
  
  
    12.  
      13.   
  
  
  
    13.     /*此處的*號(hào)建議替換成具體的布局容器（div，view...），以加快css解析*/ 
      14.   
  
  
  
    14.     & > * { 
      15.   
  
  
  
    15.         flex: 0 0 #{$itemWidth + '%'}; 
      16.   
  
  
  
    16.         height: $itemHeight; 
      17.   
  
  
  
    17.         margin-right: $space; 
      18.   
  
  
  
    18.         margin-bottom: $space; 
      19.   
  
  
  
    19.         box-sizing: border-box; 
      20.   
  
  
  
    20.  
      21.   
  
  
  
    21.         &:nth-child(#{$count}n) { 
      22.   
  
  
  
    22.             margin-right: 0; 
      23.   
  
  
  
    23.         } 
      24.   
  
  
  
    24.  
      25.   
  
  
  
    25.         &:nth-last-child(-n + #{$count}) { 
      26.   
  
  
  
    26.             margin-bottom: 0; 
      27.   
  
  
  
    27.         } 
      28.   
  
  
  
    28.  
      29.   
  
  
  
    29.         /*為了兼容space-between的布局，占滿剩余空間*/ 
      30.   
  
  
  
    30.         &:last-child { 
      31.   
  
  
  
    31.             margin-right: auto; 
      32.   
  
  
  
    32.         } 
      33.   
  
  
  
    33.     } 
      34.   
  
  
  
    34. } 
      35.   
  
  
  
    35.  
      36.   
  
  
  
    36. /*使用方法*/ 
      37.   
  
  
  
    37. .list{ 
      38.   
  
  
  
    38.     /* 一行4項(xiàng)，每項(xiàng)20%寬度 */ 
      39.   
  
  
  
    39.     @include grid(4,20) 
      40.   
  
  
  
    40. } 
      41.

    以上為flex版本，假如你需要兼容ie瀏覽器，那么可以用float布局替換，float自動(dòng)左對(duì)齊，也就不需要填充最后的剩余空間了。

    方案三：網(wǎng)格布局
    網(wǎng)格布局，默認(rèn)就是左對(duì)齊，即使使用space-between。

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.      
      6.   
  
  
  
    6.      
      7.   
  
  
  
    7.      
      8.   
  
  
  
    8.      
      9.   
  
  
  
    9.      
      10.   
  
  
  
    10.      
      11.   
  
  
  
    11.  
      12.

    效果如下：

    上面的三個(gè)方案各有各的好處：

    1. 方案一的缺點(diǎn)是實(shí)現(xiàn)不夠優(yōu)雅，需要增加無(wú)用的占位標(biāo)簽。
    2. 方案二倒沒(méi)什么缺點(diǎn)，除了寫(xiě)法會(huì)復(fù)雜點(diǎn)，但只要封裝好mixin在sass中使用足夠簡(jiǎn)單，即使需要兼容ie，也只需要換成float即可。
    3. 方案三，兼容性最差，無(wú)法在ie中正常使用，但用法最簡(jiǎn)單，布局甚至比f(wàn)lex還要強(qiáng)大。

    綜上，實(shí)際使用中，還是推薦使用方案二。


    當(dāng)前文章：你肯定會(huì)用到的CSS多行多列布局
    本文來(lái)源：http://www.dlmjj.cn/article/dpoodpc.html

    其他資訊