CSS全相容的多列均勻布局問題解決方案

解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。

不斷更新，不斷更新，不斷更新，重要的事情說三遍。

6、全相容的多列均勻布局問題

如何?下列這種多列均勻布局（圖中直線為了展示容器寬度，不算在內）：

法一：display:flex

CSS3 彈性盒子(Flexible Box 或 Flexbox)，是一種布局方式，當頁面需要適應不同的螢幕大小以及裝置類型時，它依然能確保元素擁有更恰當的排布行為。

當然 flex 布局應用於移動端不錯，PC 端需要全相容的話，相容性不夠，此處略過不談。

法二：藉助虛擬元素及 text-align:justify

定義如下 HTML 樣式：

<p class="container">    <p class="justify">        <i>1</i>        <i>2</i>        <i>3</i>        <i>4</i>        <i>5</i>    </p></p>

我們知道，有個 text-align:justify 可以實現左右對齊文字效果。

text-align CSS屬性定義行內內容（例如文字）如何相對它的塊父元素對齊。text-align 並不控制塊元素自己的對齊，只控制它的行內內容的對齊。

text-align:justify 表示文字向兩側對齊。

一開始我猜測使用它可以實現，採用如下 CSS ：

.justify{  text-align: justify;}.justify i{  width:24px;  line-height:24px;  display:inline-block;  text-align:center;  border-radius:50%;}

結果如下：

Demo戳我

沒有得到意料之中的結果，並沒有實現所謂的左右對齊，尋找原因，在 W3C 找到這樣一段解釋:

最後一個水平對齊屬性是 justify，它會帶來自己的一些問題。CSS 中沒有說明如何處理連字號，因為不同的語言有不同的連字號規則。規範沒有嘗試去調和這樣一些很可能不完備的規則，而是乾脆不提這個問題。

額，我看完上面一大段解釋還是沒明白上面意思，再繼續查證，才找到原因：

雖然 text-align:justify 屬性是全相容的，但是要使用它實現左右對齊，需要注意在模組之間添加[空格/分行符號/定位字元]才能起作用。

也就是說每一個 1 間隙，至少需要有一個空格或者換行或者定位字元才行。

好的，我們嘗試一下更新一下 HTML 結構，採用同樣的 CSS：

<p class="container">    <p class="justify">        <i>1</i>        <i>2</i>        <i>3</i>        <i>4</i>        <i>5</i>    </p></p>

嘗試給每一塊中間添加一個分行符號，結果如下：

啊哦，還是不行啊。

再尋找原因，原來是出在最後一個元素上面，然後我找到了 text-align-last 這個屬性，text-align-last屬性規定如何對齊文本的最後一行，並且 text-align-last 屬性只有在 text-align 屬性設定為 justify 時才起作用。

嘗試給容器添加 text-align-last:justify：

.justify{  text-align: justify;  text-align-last: justify; // 新增這一行}.justify i{  width:24px;  line-height:24px;  display:inline-block;  text-align:center;  border-radius:50%;}

發現終於可以了，實現了多列均勻布局：

結束了？沒有，查看一下 text-align-last 的相容性：

但是一看相容性，慘不忍睹，只有 IE8+ 和 最新的 chrome 支援 text-align-last 屬性，也就是說，如果你不是在使用 IE8+ 或者 最新版的 chrome 觀看本文，上面 Demo 裡的開啟的 codePen 例子還是沒有均勻分布。

上面說了要使用 text-align:justify 實現多欄版面配置，要配合 text-align-last ，但是它的相容性又不好，真的沒辦法了麼，其實還是有的，使用虛擬元素配合，不需要 text-align-last 屬性。

我們給 class="justify" 的 p 添加一個虛擬元素：

.justify{  text-align: justify;}.justify i{  width:24px;  line-height:24px;  display:inline-block;  text-align:center;  border-radius:50%;}.justify:after {  content: "";  display: inline-block;  position: relative;  width: 100%;}

去掉了 text-align-last: justify 了，增加一個虛擬元素，效果如下：

通過給虛擬元素 :after 設定 inline-block 設定寬度 100% ，配合容器的 text-align: justify 就可以輕鬆實現多列均勻布局了。再多配合幾句 hack 代碼，可以實現相容到 IE6+ ，最重要的是代碼不長，很好理解。

那麼為什麼使用了 :after 虛擬元素之後就可以實現對齊了呢？

原因在於 justify 只有在存在第二行的情況下，第一行才左右對齊，所以在這裡，我們需要製造一個假的第二行，而 :after 虛擬元素正好再適合不過。

最終實現題目初始所示：