開本系列，談談一些有趣的 <code>CSS</code> 題目，題目類型天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。
解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
<a href="http://www.cnblogs.com/coco1s/p/5893921.html">談談一些有趣的CSS題目（一）-- 左邊豎條的實作方法</a>
<a href="http://www.cnblogs.com/coco1s/p/5895764.html">談談一些有趣的CSS題目（二）-- 從條紋邊框的實作談盒子模型</a>
<a href="http://www.cnblogs.com/coco1s/p/5899089.html">談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少</a>
<a href="http://www.cnblogs.com/coco1s/p/5908120.html">談談一些有趣的CSS題目（四）-- 從倒影說起，談談 CSS 繼承 inherit</a>
<a href="http://www.cnblogs.com/coco1s/p/5911946.html">談談一些有趣的CSS題目（五）-- 單行居中，兩行居左，超過兩行省略</a>
如何實作下列這種多列均勻布局（圖中直線為了展示容器寬度，不算在内）：
CSS3 彈性盒子(Flexible Box 或 Flexbox)，是一種布局方式，當頁面需要适應不同的螢幕大小以及裝置類型時，它依然能確定元素擁有更恰當的排布行為。
當然 flex 布局應用于移動端不錯，PC 端需要全相容的話，相容性不夠，此處略過不談。
定義如下 <code>HTML</code> 樣式：
我們知道，有個 text-align:justify 可以實作兩端對齊文本效果。
<code>text-align</code> CSS屬性定義行内内容（例如文字）如何相對它的塊父元素對齊。text-align 并不控制塊元素自己的對齊，隻控制它的行内内容的對齊。 <code>text-align:justify</code> 表示文字向兩側對齊。
一開始我猜測使用它可以實作，采用如下 CSS ：
結果如下：
<a href="http://codepen.io/Chokcoco/pen/AXbgbq">Demo戳我</a>
最後一個水準對齊屬性是 <code>justify</code>，它會帶來自己的一些問題。CSS 中沒有說明如何處理連字元，因為不同的語言有不同的連字元規則。規範沒有嘗試去調和這樣一些很可能不完備的規則，而是幹脆不提這個問題。
額，我看完上面一大段解釋還是沒明白上面意思，再繼續查證，才找到原因：
雖然 <code>text-align:justify</code> 屬性是全相容的，但是要使用它實作兩端對齊，需要注意在子產品之間添加[空格/換行符/制表符]才能起作用。
也就是說每一個 1 間隙，至少需要有一個空格或者換行或者制表符才行。
好的，我們嘗試一下更新一下 <code>HTML</code> 結構，采用同樣的 CSS：
嘗試給每一塊中間添加一個換行符，結果如下：
<a href="http://codepen.io/Chokcoco/pen/qNVyKY">Demo戳我</a>
啊哦，還是不行啊。
再尋找原因，原來是出在最後一個元素上面，然後我找到了 <code>text-align-last</code> 這個屬性，<code>text-align-last</code>屬性規定如何對齊文本的最後一行，并且 <code>text-align-last</code> 屬性隻有在 <code>text-align</code> 屬性設定為 <code>justify</code> 時才起作用。
嘗試給容器添加 <code>text-align-last:justify</code>：
發現終于可以了，實作了多列均勻布局：
<a href="http://codepen.io/Chokcoco/pen/rLYAkj">Demo戳我</a>
結束了？沒有，檢視一下 <code>text-align-last</code> 的相容性：
但是一看相容性，慘不忍睹，隻有 IE8+ 和 最新的 chrome 支援 <code>text-align-last</code> 屬性，也就是說，如果你不是在使用 IE8+ 或者 最新版的 chrome 觀看本文，上面 Demo 裡的打開的 codePen 例子還是沒有均勻分布。
上面說了要使用 <code>text-align:justify</code> 實作多列布局，要配合 <code>text-align-last</code> ，但是它的相容性又不好，真的沒辦法了麼，其實還是有的，使用僞元素配合，不需要 <code>text-align-last</code> 屬性。
我們給 <code>class="justify"</code> 的 <code>div</code> 添加一個僞元素：
去掉了 <code>text-align-last: justify</code> 了，增加一個僞元素，效果如下：
<a href="http://codepen.io/Chokcoco/pen/grXgXy">Demo戳我，任意列數均勻布局</a>
通過給僞元素 <code>:after</code> 設定 <code>inline-block</code> 設定寬度 <code>100%</code> ，配合容器的 <code>text-align: justify</code> 就可以輕松實作多列均勻布局了。再多配合幾句 hack 代碼，可以實作相容到 IE6+ ，最重要的是代碼不長，很好了解。
那麼為什麼使用了 :after 僞元素之後就可以實作對齊了呢？
原因在于 justify 隻有在存在第二行的情況下，第一行才兩端對齊，是以在這裡，我們需要制造一個假的第二行，而 :after 僞元素正好再适合不過。
最終實作題目初始所示：
此方法初見于這篇文章，得到原部落客同意寫入了本系列，非常值得一看：
<a href="http://mp.weixin.qq.com/s?__biz=MzI1MTA2MDcyOQ==&mid=2649567067&idx=1&sn=8c9602c305026c55f412fe3d398cbf58&scene=0#wechat_redirect" target="_blank">别想多了，隻不過是兩端對齊而已</a>
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。