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 ,歡迎你們傳播與分享.