FLEX 網格布局及響應式處理

上一篇文章用Flex實現BorderLayout,這一章我們來實現常用的網格布局和響應式處理.

 

首先我們定義HTML結構,主Box為grid,每項為grid-cell,下面就是我們HTML代碼結構.


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

 

grid為flex容器,grid-cell為flex項,我們加入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項之間的距離相等.grid-cell里設置為等比例的放大或縮小.

 

在這里,我們在.grid-cell里面加入一個demo盒子,這是為了更好的去控制grid-cell元素,不破壞flex布局的功能性,也就是各自負責各自的事情.為了效果好看,我加入了更多的網格模式.HTML結構,如下

<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>

.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里面設定高度和背景色,為了布局能夠正確顯示出來.

最終效果如下圖:

網格布局,我們就實現了.現在不同以往只需要對電腦做好顯示效果就可以了,如今社會,智能設備遍地都是.而人們使用智能設備的時間也遠遠大於PC,智能設備上顯示也是重中之重,響應式布局也就出來了.

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

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

 

就完成了上面網格布局的不同設備顯示效果.我們這里是超過768像素的設備就正常顯示,如果小於這個值,每個flex項就整行顯示.看看效果:

 

 

本文屬於吳統威的博客,微信公眾號:bianchengderen 的原創文章,轉載時請注明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=150 ,歡迎大家傳播與分享.