摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學(xué)可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。

寫在前面
最近看到《圖解CSS3》的布局部分，結(jié)合自己以前閱讀過的一些布局方面的知識，這里進(jìn)行一次基于CSS2、3的各種布局的方法總結(jié)。

在拿到設(shè)計稿時，作為一個前端人員，我們首先會做的應(yīng)該是為設(shè)計圖大致地劃分區(qū)域，然后選擇一種最合理的，結(jié)構(gòu)清晰的布局。下面我先根據(jù)一些典型的網(wǎng)站案例列舉一下幾種常見的頁面布局。

這個是我們比較常見的布局，其頁面的頂部一般放置橫網(wǎng)站的標(biāo)志或Banner廣告，下方左側(cè)是導(dǎo)航欄菜單，下方右側(cè)則用于放置網(wǎng)頁正文等主要內(nèi)容。
Segmentfault的主頁就是T型布局的。由于網(wǎng)頁太長了。。沒有截取底部。

國字型布局下最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來是網(wǎng)站的主要內(nèi)寄，左右分列一些小條內(nèi)容，中問是主要部分，與左右一起羅列到底，最下方是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。
案例圖片來自騰訊11年的一道前段筆試題，有興趣的同學(xué)可以去看一下。2011騰訊前端面試稿

POP布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。常用于時尚類站點。優(yōu)點顯而易見：漂亮吸引人。缺點就是速度慢。
人大的主頁就類似這種布局。

顧名思義，就是網(wǎng)頁主體分為左右兩大塊，多見為后臺管理系統(tǒng)頁面。一般左右布局型的頁面需要做到兩列等高。

如：

參見蘋果的官網(wǎng)，類似于整屏顯示的網(wǎng)頁都為上下布局。

關(guān)于布局的類型就先說這么多，下面來總結(jié)一下上述的布局怎么來實現(xiàn)。下面提一下大家應(yīng)該都很熟悉的兩大布局方法。圣杯布局和雙飛燕布局。其實這兩種方法一般多用國字型布局上。就是針對三行三列布局的。進(jìn)行相應(yīng)的改造也可以用在T字型布局上。用這兩種方法可以很好地解決主體部分優(yōu)先加載的問題。

基礎(chǔ)布局：

重點來看main部分的代碼

    
這里是主體
    
這是左側(cè)邊欄
    
這是右側(cè)邊欄

以上就是圣杯布局方法，基本思路是運(yùn)用浮動加定位的方法，缺點是代碼較復(fù)雜，不能模擬三欄等高效果。

布局的效果跟圣杯的一樣，代碼有所不同。雙飛燕布局的代碼更加簡單，只是多加了一個div用來布局。
基礎(chǔ)布局部分代碼一樣。

main部分：

    

        
        
這里是主體
    
    
這是左側(cè)邊欄
    
這是右側(cè)邊欄

了解了以上兩種布局的方法后，很多布局都能寫得得心應(yīng)手了。但是應(yīng)對多欄等高布局還有點欠缺。那么現(xiàn)在來談?wù)劧鄼诘雀卟季值姆椒ā?/p> 多欄等高布局

這里詳細(xì)總結(jié)了等高布局的八大方法 Click，我再談?wù)剬嶋H項目中比較常用的，或者說比較簡單的三種方法。

圖片模擬

比如我們需要做一個上圖的布局，那么需要截取這樣一個側(cè)邊的小圖片對側(cè)邊和內(nèi)容部分包裹的元素進(jìn)行背景平鋪，用來模擬出側(cè)邊欄的高度跟內(nèi)容高度一致的視覺效果。

table布局

只需要將需要等高的若干欄設(shè)置display屬性為table-cell；若其中一列希望是自適應(yīng)寬度，還需將父元素的display設(shè)置成table，width為100%。

代碼如下：

padding補(bǔ)白

這是前不久在網(wǎng)上看到的一種辦法，實質(zhì)就是為欄目添加一個足夠大的padding-bottom值，將欄目撐開，然后再添加相同大小的負(fù)的margin-bottom值將內(nèi)容移動回來。注意要在負(fù)盒子上加上overflow: hidden的屬性。

代碼如下：

CSS2的布局方法總結(jié)得到這里就告一段落了?，F(xiàn)在來看看CSS3新增的布局方法。

因為書面上的解釋比較抽象，我這里就盡量說得簡單通俗一點。

要進(jìn)行flex布局，需要定義一個flex容器，然后再處理其子項目。只要一個容器被定義為flex容器，那么其子元素都稱作它的子項目。

flex布局的基本思想是通過flex容器來伸縮控制子項目的寬度和高度，以此來完全填充flex容器的可用空間。子項目的寬高、排列方式等都是通過設(shè)置相關(guān)屬性改變的。那么以這種方式布局上述幾種布局就簡單多了。子項目默認(rèn)的排列方式與浮動布局略為相似。

flex容器的定義方式：

div{display:flex}

flex容器分為主軸和側(cè)軸。主軸決定容器子項的排列方向。側(cè)軸與主軸相互垂直。主軸可有垂直和水平兩個方向。

flex容器可對子項進(jìn)行的操控有：（即設(shè)置在容器的屬性。這個很重要?。?/p>

子項目的排列方向（也就是剛剛說的定義主軸）—— flex-direction

子項目的換行方式（就是超出flex容器跨度時換不換行=。=怎么換） —— flex-wrap

同時進(jìn)行子項目排列方向和換行方式的設(shè)定 —— flex-flow

子項目在主軸的對齊方式（想象成文字的對齊方式就容易理解了） —— justify-content

子項目在側(cè)軸的對齊方式 —— align-items

同時進(jìn)行子項目主軸和側(cè)軸對齊方式的設(shè)定 —— align-content

下面來看看每一個屬性的取值和實現(xiàn)效果

flex-direction：

div{
    flex-direction: row /*水平排列，默認(rèn)*/
                     /*水平排列，但子項目從右側(cè)開始排列*/
                     /*垂直排列*/
                    ; /*垂直排列，但子項目從下側(cè)開始排列*/
   }
   

測試中我令flex容器的寬度為100px，高為200px，定義了5個未定義寬高的子項目，演示了上述的四種排列情況。效果：

這里需要說明的是：在未定義子項目的伸縮方式時，默認(rèn)是按子項目本身大小渲染的。

flex-wrap

div{
    flex-direction: nowrap 
    /*當(dāng)子項目在主軸上的總跨度大于主軸長度時，不進(jìn)行換行，而是縮小每個子項目的跨度。默認(rèn)*/
                     /*---同上---進(jìn)行換行顯示*/
                     /*從側(cè)軸的末端進(jìn)行換行（在主軸的排列方向不變）。實際不常用*/
   }

測試中我定義了每個子項目的寬度為30px，flex容器還是原來的100px寬。效果：

由于這里設(shè)定的是子項目寬度，所以對于主軸為垂直方向的容器子項沒什么影響。

flex-flow

div{
    flex-flow:  || ;
    /*就是上述兩個屬性的結(jié)合簡寫 默認(rèn)：flex-flow：row nowrap*/
   }

justify-content

div{
    justify-content: flex-start /*以項目開始進(jìn)行排列的那端進(jìn)行對齊，默認(rèn)左對齊*/
                      /*以項目結(jié)束排列的那端進(jìn)行對齊，默認(rèn)右對齊*/
                      /*居中對齊，默認(rèn)水平居中*/
        
        /*兩端對齊且項目之間的間隔都相等（貼邊顯示）*/
                      
         
         /*第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半下平均分布*/
                     
                    
   }

測試時我設(shè)定了flex容器寬高都為200px，子項沒有設(shè)定寬高。 效果：

主軸為水平方向時：

主軸為水平垂直時：

align-items

div{
    align-items: flex-start /*側(cè)軸起始點對齊*/
                  /*側(cè)軸終止點對齊*/
                  /*側(cè)軸中點點對齊*/
        
        /*項目的第一行文字的基線對齊*/
                  
         
         /*默認(rèn)值，如果項目未設(shè)定寬（高度），則占滿整個容器側(cè)軸跨度*/
                 
                    
   }
   

最后的baseline看起來跟flex-start沒啥區(qū)別，因為我給每個子項設(shè)置高度。設(shè)置高度后：

align-content

div{
    align-content: flex-start /*與側(cè)軸起始點對齊*/
                    /*與側(cè)軸終止點對齊*/
                    /*與側(cè)軸中點點對齊*/
        
        /*與側(cè)軸兩端對齊，各子項在各軸上的間距相等*/
                    
         /*各子項在各軸上的間距相等，項目間距比邊距間距大一倍*/          
                          
         /*項目占滿整個側(cè)軸*/
                   
                    
   }

上面已提到過，對于單軸線的子項來說，本屬性不起作用。但是默認(rèn)情況下是只有子項目是一根軸線的（flex-wrap默認(rèn)是nowrap），所以要使這個屬性看到效果，必須設(shè)置flex-wrap。
已下是flex-wrap為wrap的幾種情況。

以下這些屬性設(shè)置在子項上。
子項自身的操控有

子項目的排列順序 —— order

子項目的放大比例 —— flex-grow
默認(rèn)為0，即如果主軸上有剩余空間，也不放大子項。

子項目的縮小比例 —— flex-shrink
默認(rèn)為1，即如果主軸空間不足，即縮小子項。

同時設(shè)定前三者 —— flex

設(shè)定單個項目其自身在側(cè)軸的對齊方式 —— align-self

那么分別來看看每個屬性的取值和實現(xiàn)效果（）

order
利用這個屬性可以解決某個區(qū)塊優(yōu)先加載但是在頁面上的顯示較靠后的問題。

div .item {order:}
/*數(shù)值越大，排列越靠后。默認(rèn)為0*/

這里我設(shè)置了第一個子項的order為1。

flex-grow
如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的空間將比其他項多一倍。

div .item {flex-grow:}  

設(shè)置flex-grow前：

設(shè)置后：

第二個項目的flex-grow為2，其他為0：
<注意這個時候就不需要給子項設(shè)置寬度了>

flex-shrink
如果所有項目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

div .item {flex-shrink:} 

我給每個子項設(shè)定了200px的寬度，而flex容器寬度為500px，這時候若不設(shè)置flex-shrink，則每個項目都會以相同比例縮小自身大小來適應(yīng)容器。
此時我給第二個項目設(shè)置了flex-shrink: 0; 該項目大小不變。

flex-basis
這個屬性設(shè)置子項在主軸上的跨度，簡單地說就是設(shè)置寬高。

div .item {flex-basis: | auto/*auto是默認(rèn)值，就是項目本身大小*/} 

flex
這個就是把flex-grow、flew-shrink、flex-basis結(jié)合一起的寫法啦=。=

div .item {flex:none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]} 

flex-grow必須。默認(rèn)為0 1 auto。

align-self
這個屬性用來多帶帶設(shè)定某個子項目在側(cè)軸的對齊方式。

div .item {align-self:flex-start|flex-end|center|baseline|stretch} 

有關(guān)flex布局的方法就總結(jié)和介紹到這里了。有興趣看可以看一下下面大大們寫的相關(guān)方面的文章。
Flex布局教程——阮一峰 傳送門
A Complete Guide to Flexbox 傳送門2
一個完整的Flexbox指南 傳送門3

下邊把利用flex布局實現(xiàn)上述幾種布局的代碼貼出來（可有多種實現(xiàn)方法）。

T布局

國字型布局

等高布局
真心簡單。

拖了半個多月的博文。。也算是寫完了，感謝大家閱讀。