開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什么說什么，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。
解題不考慮兼容性，題目天馬行空，想到什么說什么，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
談談一些有趣的CSS題目（二）-- 從條紋邊框的實現談盒子模型
談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少
談談一些有趣的CSS題目（四）-- 從倒影說起，談談 CSS 繼承 inherit
談談一些有趣的CSS題目（五）-- 單行居中，兩行居左，超過兩行省略
所有題目匯總在我的 Github 。
6、全兼容的多列均勻布局問題
如何實現下列這種多列均勻布局（圖中直線為了展示容器寬度，不算在內）：
法一：display:flex
CSS3 彈性盒子(Flexible Box 或 Flexbox)，是一種布局方式，當頁面需要適應不同的屏幕大小以及設備類型時，它依然能確保元素擁有更恰當的排布行為。
當然 flex 布局應用於移動端不錯，PC 端需要全兼容的話，兼容性不夠，此處略過不談。
法二：借助偽元素及 text-align:justify
定義如下 HTML 樣式：
<div class="container">
<div class="justify">
<i>1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i>
</div>
</div>
我們知道，有個 text-align:justify 可以實現兩端對齊文本效果。
text-alignCSS屬性定義行內內容（例如文字）如何相對它的塊父元素對齊。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%;
}
結果如下：
沒有得到意料之中的結果，並沒有實現所謂的兩端對齊，查找原因，在 W3C 找到這樣一段解釋:
最后一個水平對齊屬性是
justify，它會帶來自己的一些問題。CSS 中沒有說明如何處理連字符，因為不同的語言有不同的連字符規則。規范沒有嘗試去調和這樣一些很可能不完備的規則，而是干脆不提這個問題。
額，我看完上面一大段解釋還是沒明白上面意思，再繼續查證，才找到原因：
雖然 text-align:justify 屬性是全兼容的，但是要使用它實現兩端對齊，需要注意在模塊之間添加[空格/換行符/制表符]才能起作用。
也就是說每一個 1 間隙，至少需要有一個空格或者換行或者制表符才行。
好的，我們嘗試一下更新一下 HTML 結構，采用同樣的 CSS：
<div class="container">
<div class="justify">
<i>1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i>
</div>
</div>
嘗試給每一塊中間添加一個換行符，結果如下：
啊哦，還是不行啊。
再尋找原因，原來是出在最后一個元素上面，然后我找到了 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" 的 div 添加一個偽元素：
.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 偽元素正好再適合不過。
最終實現題目初始所示：
此方法初見於這篇文章，得到原博主同意寫入了本系列，非常值得一看：
所有題目匯總在我的 Github ，發到博客希望得到更多的交流。
到此本文結束，如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。