国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

css如何實(shí)現(xiàn)n宮格布局?

sarva / 2041人閱讀

摘要：常見(jiàn)應(yīng)用場(chǎng)景現(xiàn)在的界面基本都是大同小異宮格布局現(xiàn)在基本成了每個(gè)必然的存在帶邊框常用在功能導(dǎo)航頁(yè)面無(wú)邊框常用在首頁(yè)分類(lèi)設(shè)計(jì)目標(biāo)在環(huán)境下通過(guò)實(shí)現(xiàn)宮格并且可以支持有無(wú)邊框和每個(gè)格是否正方形有邊框且每個(gè)格為正方形無(wú)邊框最終效果百分比小技巧先解釋一個(gè)

常見(jiàn)應(yīng)用場(chǎng)景

現(xiàn)在的APP界面基本都是大同小異, 宮格布局現(xiàn)在基本成了每個(gè)APP必然的存在.

帶邊框, 常用在"功能導(dǎo)航"頁(yè)面

無(wú)邊框, 常用在首頁(yè)分類(lèi)

設(shè)計(jì)目標(biāo)

在scss環(huán)境下, 通過(guò)mixin實(shí)現(xiàn)n宮格, 并且可以支持"有無(wú)邊框"和"每個(gè)格是否正方形":

@include grid(3, 3, true); // 3 x 3, 有邊框, 且每個(gè)格為正方形
@include grid(2, 5, false, false); // 2 x 5, 無(wú)邊框
最終效果

"padding百分比"小技巧

先解釋一個(gè)小技巧, 如何實(shí)現(xiàn)正方形, 保證看一遍就會(huì), 結(jié)論就是:

padding的值如果是百分比, 那么他是相對(duì)"父"元素寬度計(jì)算的, 也就是說(shuō)如果"父"元素寬度是100px, "子"元素設(shè)置padding-top:100%,"子"元素的padding-top實(shí)際上等于100px, 這樣就實(shí)現(xiàn)了一個(gè)正方形(100 x 100). 為了減少干擾, 我們把"子"元素高度設(shè)置為0;

設(shè)計(jì)思路(無(wú)關(guān)你是scss還是less)

為了方便內(nèi)部元素水平/垂直居中, 整體我們用flex布局.

使用正方形占位, 因?yàn)橛昧?b>padding-top:100%, 所以我們就需要再多帶帶用一個(gè)div來(lái)裝內(nèi)容, 我給他起名"item__content".

為了讓內(nèi)容的容器div充滿方塊, 我們給他設(shè)置樣式:position:absolute;top:0;left:0;right:0;bottom:0;;

因此我們的html是這樣的:




  
  

      
      

        內(nèi)容...
代碼(scss)

這里做了3件事:

為了不冗余, 我把公共的部分抽離的出來(lái)起名".a-grid";

mixin支持4個(gè)參數(shù), 分別是$row(行數(shù)), $column(列數(shù)), $hasBorder(是否有邊框), $isSquare(是否保證每個(gè)塊是正方形).

mixin內(nèi)部通過(guò)計(jì)算并結(jié)合:nth-child實(shí)現(xiàn)"整體無(wú)外邊框"的效果,

.a-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .a-grid__item {
        text-align:center;
        position:relative;
        >.item__content {
            display:flex
            flex-flow: column;
            align-items: center;
            justify-content: center;
        }
    }
}

@mixin grid($row:3, $column:3, $hasBorder:false, $isSquare:true) {
    @extend .a-grid;

    .a-grid__item {

        flex-basis: 100%/$column;

        @if($isSquare) {
            padding-bottom: 100%/$column;
            height: 0;
        }

        >.item__content {

            @if($isSquare) {
                position:absolute;
                top:0;left:0;right:0;bottom:0;
            }
        }
    }

    @for $index from 1 to (($row - 1) * $column + 1) {
        .a-grid__item:nth-child(#{$index}) {
            @if($hasBorder) {
                border-bottom: 1px solid #eee;
            }
        }
    }

    @for $index from 1 to $column {
        .a-grid__item:nth-child(#{$column}n + #{$index}) {
            @if($hasBorder) {
                border-right: 1px solid #eee;
            }
        }
    }
}
使用 
// 生成一個(gè) 3行3列, 正方形格子的宮格
.a-grid-3-3 {
    @include grid(3, 3, true);
}

// 生成一個(gè) 2行5列, 無(wú)邊框?qū)m格, 每個(gè)格子由內(nèi)容決定高度
.a-grid-2-5 {
    @include grid(2, 5, false, false);
}

提醒大家: 如要做n x m的布局, 用@include grid(n, m)后千萬(wàn)別忘了在html中添加 n x m個(gè)對(duì)應(yīng)的dom結(jié)構(gòu).

最終

內(nèi)容很簡(jiǎn)單, 還有很多可以?xún)?yōu)化的地方, 比如邊框可以改成"頭發(fā)絲"邊框, 在真機(jī)上看起來(lái)更細(xì)些.

好了, 內(nèi)容就這些, 拋磚引玉, 如果有更好的實(shí)現(xiàn)方式請(qǐng)留言, 感謝大家閱讀.

最近在寫(xiě)一個(gè)css樣式庫(kù), 目標(biāo)是兼容小程序, 大家有興趣的可以一起玩, 這是本節(jié)課對(duì)應(yīng)的源碼:

https://github.com/any86/3a.c...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/116353.html

相關(guān)文章

  • 如何創(chuàng)建一個(gè)全等四宮格/九宮格（容器寬高未知）

    摘要：代碼如下部分如何實(shí)現(xiàn)呢我們可以用任意改變長(zhǎng)寬元素彈性元素彈性有興趣的可以試一下，當(dāng)容器寬高發(fā)生變化時(shí)，內(nèi)容塊仍然是全等的四宮格。當(dāng)然，以上有代碼一個(gè)問(wèn)題，在以下是不兼容的。 html代碼如下 css部分如何實(shí)現(xiàn)呢？我們可以用 flex .container{ ...

    clasnake 評(píng)論0 收藏0

  • 使用css偽類(lèi)before／after實(shí)現(xiàn) 正方形三宮格、正方形六宮格、正方形九宮格

    摘要：結(jié)構(gòu)圖解析后記 結(jié)構(gòu)圖解析： showImg(https://segmentfault.com/img/bVbvXEo?w=862&h=235); showImg(https://segmentfault.com/img/bVbvXEq?w=604&h=814); showImg(https://segmentfault.com/img/bVbvXEv?w=604&h=326); 后記...

    CNZPH 評(píng)論0 收藏0

  • 移動(dòng)端兩端對(duì)齊 + 圖片寬度自適應(yīng)

    摘要：自適應(yīng)四宮格有這樣一張?jiān)O(shè)計(jì)稿，左右兩邊白色間距為，中間間距為，每一行的兩張圖是等寬的即平分去掉間距后的寬度有一種方法是和設(shè)計(jì)師商量，把所有的具體尺寸改為百分比尺寸。。 自適應(yīng)四宮格 有這樣一張?jiān)O(shè)計(jì)稿，左右兩邊白色間距為4px，中間間距為10px，每一行的兩張圖是等寬的（即平分去掉間距后的寬度） showImg(http://www.ganother.com/images/four-it...

    JerryC 評(píng)論0 收藏0

  • 移動(dòng)端兩端對(duì)齊 + 圖片寬度自適應(yīng)

    摘要：自適應(yīng)四宮格有這樣一張?jiān)O(shè)計(jì)稿，左右兩邊白色間距為，中間間距為，每一行的兩張圖是等寬的即平分去掉間距后的寬度有一種方法是和設(shè)計(jì)師商量，把所有的具體尺寸改為百分比尺寸。。 自適應(yīng)四宮格 有這樣一張?jiān)O(shè)計(jì)稿，左右兩邊白色間距為4px，中間間距為10px，每一行的兩張圖是等寬的（即平分去掉間距后的寬度） showImg(http://www.ganother.com/images/four-it...

    atinosun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<