FLEX 網(wǎng)格布局及響應(yīng)式處理

上一篇文章用Flex實(shí)現(xiàn)BorderLayout,這一章我們來實(shí)現(xiàn)常用的網(wǎng)格布局和響應(yīng)式處理.

首先我們定義HTML結(jié)構(gòu),主Box為grid,每項(xiàng)為grid-cell,下面就是我們HTML代碼結(jié)構(gòu).

<div class="grid">
    <div class="grid-cell">
        1    </div>
    <div class="grid-cell">
        2    </div>
</div>

grid為flex容器,grid-cell為flex項(xiàng),我們加入CSS代碼

.grid{
    display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
}.grid-cell{
    flex-grow: 1;
   flex-shrink: 1;
   padding: 10px;
}

了解過前兩篇flex布局文章,代碼沒什么好解釋的了,space-around是為了保證flex項(xiàng)之間的距離相等.grid-cell里設(shè)置為等比例的放大或縮小.

在這里,我們?cè)?grid-cell里面加入一個(gè)demo盒子,這是為了更好的去控制grid-cell元素,不破壞flex布局的功能性,也就是各自負(fù)責(zé)各自的事情.為了效果好看,我加入了更多的網(wǎng)格模式.HTML結(jié)構(gòu),如下

<div class="grid">
    <div class="grid-cell">
        <div class="demo">1</div>
    </div>
    <div class="grid-cell">
        <div class="demo">2</div>
    </div>
</div>


<div class="grid">
    <div class="grid-cell">
        <div class="demo">1</div>
    </div>
    <div class="grid-cell">
        <div class="demo">2</div>
    </div>

    <div class="grid-cell">
        <div class="demo">3</div>
    </div>
</div>


<div class="grid">
    <div class="grid-cell">
        <div class="demo">1</div>
    </div>
    <div class="grid-cell">
        <div class="demo">2</div>
    </div>

    <div class="grid-cell">
        <div class="demo">3</div>
    </div>

    <div class="grid-cell">
        <div class="demo">4</div>
    </div>
</div>

CSS代碼:

.grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}.grid-cell{
    flex-grow: 1;
    flex-shrink: 1;
    padding: 10px;
}.demo{
    background-color: #eeeeee;
    min-height: 50px;
    text-align: center;
     width: 100%;;
}

demo里面設(shè)定高度和背景色,為了布局能夠正確顯示出來.

最終效果如下圖:

網(wǎng)格布局,我們就實(shí)現(xiàn)了.現(xiàn)在不同以往只需要對(duì)電腦做好顯示效果就可以了,如今社會(huì),智能設(shè)備遍地都是.而人們使用智能設(shè)備的時(shí)間也遠(yuǎn)遠(yuǎn)大于PC,智能設(shè)備上顯示也是重中之重,響應(yīng)式布局也就出來了.

響應(yīng)式布局用到的是media這個(gè)屬性,所以處理起來也是很簡單的.我們只需要加入下面的代碼:

@media (max-width:768px){
     .grid-cell{
         flex-basis: 100%;
     }
}

就完成了上面網(wǎng)格布局的不同設(shè)備顯示效果.我們這里是超過768像素的設(shè)備就正常顯示,如果小于這個(gè)值,每個(gè)flex項(xiàng)就整行顯示.看看效果:

本文屬于吳統(tǒng)威的博客,微信公眾號(hào):bianchengderen 的原創(chuàng)文章,轉(zhuǎn)載時(shí)請(qǐng)注明出處及相應(yīng)鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=150 ,歡迎大家傳播與分享.