標題中的圖標布局，其實指的是在一個塊級容器中，從左至右水平羅列若干大小、間距相等的圖標，一行排列滿了后自動換行到下一行繼續從左至右水平羅列。至於這個布局具體應該叫什么我也不清楚，總之他有點像我們的蘋果或者安卓的桌面，也有點像微軟的磁貼，還有點像已經被被關閉的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開發使用都簡單了不少。
基於響應式布局的圖標布局缺點也很明顯，就是不能使用現成的框架，需要開發者自己去計算各個屏幕的適配情況，是需要一定的計算量的。同時當圖標大小發生變化的時候，又需要重新計算，尤其要支持高分辨率的屏幕的時候，需要計算的工作就更多了。同時響應式布局只能根據整個頁面的分辨率變化，不能根據一個局部容器的大小變化，也是其不足之處。
請查看完整的例子。
以上就是筆者總結的圖標布局的幾種實現方式，不知道各位有沒有更簡單的實現方法，歡迎大家分享經驗^_^。