FLEX 網格布局及響應式處理，flex網格布局響應

FLEX 網格布局及響應式處理，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 ,歡迎大家傳播與分享.