自從Html 4開始，你知道的最強大工具之一流體和響應式布局一直是每個浏覽器功能特性嗎？
首先來看一個demo
demo
背景
去年年初致力一個項目，馬上讓我感到沮喪，我不得不為頁腳的導航菜單在不同的客戶下計算菜單項之間的距離。
我在思考Microsoft Word中的兩端對齊，可以讓文本填充整個寬度，並且修改間距實現兩端對齊。我想知道，如果同樣的原理可以應用到HTML一個菜單鏈接，是否可行？大家都知道在CSS屬性中有一個“text-align:justify”屬性長期存在（在Html4中有一個屬性align="justify"），於是為了得到答案，我做了一些搜索。
果然，我在StackOverflow上找到了一些關於水平導航菜單項兩端對齊的討論 。
上圖展示了一個寬屏下導航菜單兩端對齊。
如何工作
在其自然狀態下，"text-align:justify"就不能工作，除非內容足夠長並引起一個換行符。否則，文本仍然左對齊。如果你想知道這是為什麼，這是因為在排版中這是理想的行為——一個塊中的最後一行文本總是左對齊。也許這是一個CSS規范設計，即使我們只有一行文本，這一行還是像最後一行一樣，讓文本左對齊。
我嘗試了幾次，我們在元素最後設置一個看不見的內聯元素，並設置他的寬度為100%(如紫色的虛線)可以解決這個問題。這樣就打破元素分享一條其他的線而不是元素本身，它會導致一個換行符出現。這樣一來他前面的內容就能兩端對齊。
上圖展示的是沒有一個打破元素，因為沒有足夠元素來打破線（沒有換行符）所有元素將左對齊
上圖展示的是使用一個打破元素，打破元素顯示為紫色的虛線，這樣就產生一個換行符，由於其寬度為100%，打破元素前面的所有行內元素實現兩端對齊。
因為“text-align:justify”設計是用於內聯的話，他可以對任何內聯元素有效——更重要的是任何內聯塊（inline-block）元素。
固定網格是一個特殊的項目，網站沒有使用響應式設計（還記得我們怎麼構建的嗎？），這種技術潛在意思是響應式沒有發生在我的身上，直到後來，我開始結合它與基於百分比的內聯塊元素。
上圖展示的是內聯塊元素兩端對齊。注意，打破元素再次用於元素的最後一行。
影響響應式設計
幾乎我們所有的響應式設計的內容都可以在一個網格中完成。傳統上，我們給網格設置一個百分比寬度，然後把剩余的空間按百分比分割成相等的比率。
當我想要我的網格可以直接靠著容器的邊緣時，我會將每行的第一個和最後一個，使用nth-of-type屬性來刪除他們的左邊距和右邊距。這好像是要做很多的計算，而且百分比轉換成像素的時候，浏覽器要上向上多轉一個像素，足以引起你的項目換行，哪怕是所有的寬度和間距加起來的寬度剛好等於100%。
我想我們都碰到過這樣的問題。接下我來們要驗證"text-align:justify"時刻到了。
僅需要在容器中設置“text-align:justify”和把容器的字元素設置為“display:inline-block”，你將不再需要處理他們之間的間距。（哦，我有沒有提到，使用這個技巧時，你也不需要在把你的元素浮動，所以你可以行別那些清除浮動的方法）。
注意：我們應該注意到，當使用“display:inline-block”時，我們需要使用一些排版的CSS樣式，主要包括：font-size、line-height、vertical-align和Word-space等。因為這些屬性將會直接影響內聯塊元素之間的空格，但是可以很容易的根據需要調整或刪除。在99%的情況下，在容器中設置“font-size:.1px”和"vertical-align:top"就可以解決元素之間空格。
關於inline-block之間的空格問題
有關於如何解決行內塊元素之間的空格問題，大家要是感興趣的話，可以閱讀《如何解決inline-block元素的空白間距》和《inline-block 前世今生》。
——大漠
“中斷”元素
正如前面所提到的，這種技術第一個問題是，需要在使用兩端對齊之前要加一個中斷元素。如果你有一個多行網格，這不會是必要的。但它是至關重要的技術，有兩種方法可能解決這個問題。
1、在容器中添加一個最後子元素：
<ul id="Grid"> <li></li> <li></li> <li></li> <li></li> <li class="break"></li> </ul>
使用下面的樣式：
#Grid{ text-align: justify; font-size: 0.1px; /*hide whitespace between elements*/ } #Grid li{ display: inline-block; width: 23%; ... } #Grid .break{ width: 100%; height: 0; ... }
2、應用“:after”偽類
#Grid:after{ content: ""; display: inline-block; width: 100%; }
我推薦使用第二種方法，更簡結更有語義。
“占位符”元素
在這一節中我們使用了“列”的術語，作為視覺的一種隱式叫法。我們都應該要注意的是，在HTML/CSS中是沒有所謂的垂直列。理解這種技術的一個關鍵點是在默認情況之下，Html的行內流是在一行中從左向右排列，逐行按此方式排列。通過使用“text-align: justify”證明我們正利用了這一特點，而不是我們反對使用浮動和絕對定位。
值得注意的是，在這種情況之下，我們無法控制容器有多少子元素。
作為最後一行我們網格是不完整的，兩端對齊的是兩個元素而不是四個。
話說最後一排有四個網格位置，你只有兩個元素，而不是你平常想要的四個網格。這時候你想最後兩個元素不是按四個元素那樣排列，兩端對齊，而是想讓這兩個元素排列在一起。為了實現這樣的效果，你需要添加無形的“占位符”元素來補齊差額。這迫死浏覽器計算空間，得出是四項而不同兩項，如上圖所示。
如果最後一行只有一個元素，那麼它不會是一個問題——因為他總是自然的左對齊。然而，如果你有任何的元素數量大於1而小於一行的總列數，那你將不得不手動的添加“占位符”元素來填補。如下圖所示：
“占位符”元素。這是一個四列網格，需要兩個占位符（見上圖紫色的實線），以確保空間尺寸計算正確。
在最後一排出現的元素數量都有可能，但“占位符”元素數量始終等於一行中最大列數減去2。這些元素應該插入在網格最後（在“打破”元素之前，如果你不使用偽元素中斷的話）。由於“占位符”元素不占用任何垂直空間，所以“占位符”元素不管最後一行是否滿格也不會影響你的布局。只要你有足夠的占位符數量存在的概念，你的布局就不會亂。
占位符元素數量 = 每行最大的列數 - 2
顯然在語義方面比較差，因為沒有什麼偽元素可以創建這樣的占位符。在一個網格中，最後一行可以有最大數量的元素，我們不需要添加占位符，但在大多數CMS情況之下還是很有必要的，需要在Html中硬編一些代碼進去。
媒體查詢
媒體查詢可以根據屏幕大小來決定網格中的列數。對於每個新列的布局，我們只需要重新定義我們的列寬，就會自動重新設置兩端對齊。查看示例，了解它在四種不同布局中的變化。（注意：我們的示例也使用了流體布局，動態元素的高度通過padding-top這樣的老技術實現）。
廣泛使用
成功之後，使用這個技術，我已經開始使用它作為一個強大的布局工具，用於各種各樣的應用程序。如果不是需要，我很少使用浮動布局了，加上媒體查詢，這種技術將會成為一個令人難以置信的、強大的、省錢的方法解決基於百分比的流體布局。
也正如在非流體布局，如果你不想花時間去計算這些間距，你可使用這種方法。——為什麼不讓浏覽器為你工作呢？
也許最令人關心的是浏覽器的兼容性。因為“兩端對齊”和“行內塊”都存在很時間了，這些技術可能被用到IE7以及其以上版本（在IE7以下版本需要使用一些hack）。
作為一個腳注，MixItUP插件根據用戶動態的過濾保持一個優雅的網格展示。我知道Masonry或Isotope使用絕對定位配合JS可以實現這樣的效果。我的第一反應是有沒有CSS可以單獨完成。所以MixItUp讓我非常興奮，到目前為止這兩個技術是如何結合到一起工作的。