淺談表徵圖布局

標籤：

標題中的表徵圖布局，其實指的是在一個塊級容器中，從左至右水平羅列若干大小、間距相等的表徵圖，一行排列滿了後自動換行到下一行繼續從左至右水平羅列。至於這個布局具體應該叫什麼我也不清楚，總之他有點像我們的蘋果或者安卓的案頭，也有點像微軟的磁貼，還有點像已經被被關閉的webqq，如果你還是不知道我說的布局是什麼，看一個圖你馬上就清楚了。

例圖出自於hoorayos

表徵圖布局初看是很簡單的，前提是你已經確定了一行表徵圖的個數，或者確定了容器的寬頻。當容器的寬頻不固定，而表徵圖的大小固定時（也就是一行的表徵圖個數不是固定時），那麼如果僅靠css來做的話就困難了，很多案頭軟體都是用js計算加絕對位置布局的方式實現，下面筆者分享一下項目中用純css實現表徵圖布局的幾種方式。

1.浮動布局和行內區塊層級元素布局

例子：浮動布局、行內區塊層級元素布局

我以前都是用浮動布局或者行內區塊層級元素布局做這種，但是無論哪種布局都有一個問題，那就是右側會有填不滿的bug，會空出不到一個表徵圖寬度的距離。

當然這兩種布局的好處也很明顯，就是表徵圖的間距不會隨著容器寬頻變化而變化。

此外，如果是行內區塊層級元素布局，要注意行內元素之間會產生距離，解決辦法是將容器的字型大小設定為0；而浮動布局會造成容器不能被撐起來的現象，需要使用清除浮動clear:both。相信這些用法大家也都很熟悉了。

2.行內區塊層級元素的text-align: justify布局

為瞭解決上述兩種方法的問題，可以利用屬性text-align: justify。這個屬性是表示文字自動調整間距使其能夠佔滿一整行，其實他不止對文字起作用，對於行內區塊層級元素通用起作用。然而這樣寫雖然解決了空隙分配不均的問題，不過會出現另一個問題，那就是最後一行顯示完全混亂掉了。

其實也是有解決辦法的，參考張鑫旭老師在講解vertical-align時候，使用的用0高度的元素佔位的方法，可以比較完美的解決這個問題。我們需要確定容器支援的最大寬度，用這個寬頻除以一個表徵圖的寬頻，就得到了最大的列數。然後在最後一個表徵圖的後面，補出這些個0高度的元素來佔位。

請查看完整的例子。

這個解決方案已經比較完美了，唯一的缺點是容器和表徵圖元素之間，沒有留出空隙，這樣會顯得布局過於死板，尤其是當一行只有一個表徵圖的時候，就能很明顯的看出問題來了（那已經不算表徵圖布局了，所有出現那種情況的可能性很低，如果需要可以用響應式布局處理）。

3.flex布局

為瞭解決text-align: justify布局的問題，我們還有一種可以採用的方式，那就是flex布局。

flex布局大家應該很熟悉了，儘管現在的主流瀏覽器都已經支援這個布局了，但是在不同瀏覽器中還是有相容、標準不相同等問題。但是，如果在合理使用的情況下，絕大多數瀏覽器都已經很好地支援flex布局了，我們沒有必要再對他避而遠之了。

flex布局對於這種情況有什麼決解方法呢？這個可以參考justify-content屬性。justify-content屬性用於設定彈性盒子項目在主軸（橫軸）方向上的對齊，這裡列舉我們需要的幾個可選擇值。

flex-start	預設值。項目位於容器的開頭。
space-between	項目位於各行之間留有空白的容器內。
space-around	項目位於各行之前、之間、之後都留有空白的容器內。

其中當justify-content值為flex-start，表徵圖布局表現效果如浮動布局，所有表徵圖元素都靠向左邊，右邊也會留出分配不下的一小段距離；而當justify-content值為space-between的效果和text-align: justify差不多，留出分配不下的一小段距離會自動的分配到各個表徵圖元素之間；而space-around，留出的空隙不但會分配到各個表徵圖元素之間，還會分配到容器與表徵圖元素之間，這樣布局看起來就更自然了。

那麼僅用justify-content就能夠解決了我們問題了嗎？還不能，從我們可以看出，當容器justify-content值為space-between或者是space-around，最後一行沒有填滿時候，容器會調整最後一行元素之間的間隙，讓剩餘元素平均分配到這最後一整行中。這顯然是有問題的，如何解決呢？同樣使用0高度的元素佔位，可以很好的解決這樣的問題。

請查看完整的例子。

4.響應式布局

上述兩個布局也是不夠完美的，主要是需要設定0高度的元素去佔位，這讓dom結構不夠簡潔，畢竟通過改變dom的結構去完成布局的要求，是不符合語義化思想的。而使用響應式布局就沒有這樣的問題了。

響應式布局利用css3的media query媒體查詢功能，在不同顯示器的分別率下，分別去設定不同套的css，以實現螢幕適配問題。同時，響應式布局比flex布局相容性好，除了ie8外的所有主流瀏覽器都相容。

響應式布局不是真正的表徵圖布局，事實上他就是浮動布局加百分比布局，只是不同解析度下的參數不一樣，以達到不同解析度下一行表徵圖個數不同的目的。因為是百分百布局，所以無需考慮剩餘空隙分配的問題。而且現在主流架構都提供了一些寫好的響應式布局的class，使用這種現成的class開發使用都簡單了不少。

基於響應式布局的表徵圖布局缺點也很明顯，就是不能使用現成的架構，需要開發人員自己去計算各個螢幕的適配情況，是需要一定的計算量的。同時當表徵圖大小發生變化的時候，又需要重新計算，尤其要支援高解析度的螢幕的時候，需要計算的工作就更多了。同時響應式布局只能根據整個頁面的解析度變化，不能根據一個局部容器的大小變化，也是其不足之處。

請查看完整的例子。

以上就是筆者總結的表徵圖布局的幾種實現方式，不知道各位有沒有更簡單的實現方法，歡迎大家分享經驗^_^。

淺談表徵圖布局