大家都知道 text-align 屬性是規定元素中的文本的水平對齊方式，最常用的值是left、right、center，那么justify是什么呢？
在W3C上是這樣介紹的：
justify 可以使文本的兩端都對齊在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。然后，調整單詞和字母間的間隔，使各行的長度恰好相等
這段話有點拗口，為了直觀點體現出它的特點，所以直接上碼上圖：
<p style="width:400px;text-align:left;;margin:20px auto;"> <strong style="color:#000;margin-bottom:10px;">text-align: left:</strong></br></br> Nettie Maria Stevens was an early American geneticist. In 1905, she and Edmund Beecher Wilson were the first researchers to independently describe the chromosomal basis of sexNettie 在海岸邊，退潮時你可徒步走到一些島嶼近處，在潮間帶里看見諸如海星、海膽、海帶等海洋生物，體驗甜蜜的幸福感。或是在天氣好時，肩並肩坐在海灘上等待日落晚霞，浪漫滿溢。 </br></br> 浪漫滿溢 </p> <p style="width: 400px;text-align: justify;margin:20px auto;"> <strong style="color:#000;margin-bottom:10px;">text-align: justify:</strong></br></br> Nettie Maria Stevens was an early American geneticist. In 1905, she and Edmund Beecher Wilson were the first researchers to independently describe the chromosomal basis of sexNettie 在海岸邊，退潮時你可徒步走到一些島嶼近處，在潮間帶里看見諸如海星、海膽、海帶等海洋生物，體驗甜蜜的幸福感。或是在天氣好時，肩並肩坐在海灘上等待日落晚霞，浪漫滿溢。 </br></br> 浪漫滿溢 </p>
上面的代碼很簡單，第一個是字體左對齊，另一個是兩端對齊，出來的效果是這樣的：
兩種方法放一塊比較就可以看出使用了 text-align: justify 文字的兩端是對齊的。
但是仔細觀察一下，發現為了兩端對齊，有些文字的間距就被拉開了（第二行的英文）。有時候間隔隔得太大會造成閱讀困難，所以如果有需要的情況下用letter-spacing收縮字符間距就可以了。
另外， text-align-last:right 可以改變段落的最后一行的對齊方式。但是只有在 text-align 屬性設置為 "justify" 時才起作用
如果這個方法排版會是怎樣的呢？
<ul class="justify_list"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
.justify_list{text-align: justify;text-justify:distribute-all-lines;width: 600px;}
li{width:100px; height:100px;background-color: #0086b3; display: inline-block; list-style:none; }
效果如下：
這時候發現，被擠下來的部分並沒有左右兩端對齊。
經過查詢才知道原來是text-align:justify 不處理塊內的最后一行文本（包括塊內僅有一行文本的情況，這時既是第一行也是最后一行）
既然如此，解決方法就簡單了：
.justify_list:after {width: 100%;height: 0;margin: 0;display: inline-block;overflow: hidden;content: '';}
效果如下：
總體來說實現得還不錯。在排版的時候不需要計算每個列表元素間的margin間距，比用float的時候省事很多。
在工作中有時候發現即使滿足以上所說的條件后 text-align:justify 還是不生效，經過對比之后才發現原來需要標簽之間換行或者有空格才能實現效果。