CSS實現兩端對齊效果
兩端對齊，從概念上來說，其實不難理解。如果不明白什么叫兩端對齊，可以玩玩word等辦公軟件。
下面談談如何實現文本的兩端對齊。我所知道的大概有以下幾種方法
text-align
w3school指出，text-align用於設置塊級元素內文本的水平對齊方式。如果想使inline元素或inline-block元素居中對齊，可以使用text-align: center方法，對於block元素無法使用text-align實現居中對齊。如果想讓block元素居中對齊，可以使用margin: auto方法。
text-align屬性下有一個justify值可以設置元素的兩端對齊。但是text-align: justify屬性有一些不足之處：
- 在單行文本下，無法實現兩端對齊效果。
- 在多行文本下，無法實現最后一行文本的兩端對齊效果。
單行文本
<div class="keith">unclekeith wanna be a geek!</div> .keith { background-color: lightblue; text-align: justify; }
對於多行文本而言，如下圖，按照我們的理解應該如右圖顯示，可是在設置text-align: justify之后，會按照左圖顯示。無法是西安最后一行文本的兩端對齊效果。
解決方法
如果要真正的實現兩端對齊效果，可以用以下方法解決。
解決方法的思路：由於在單行文本下和多行文本下最后一樣無法實現兩端對齊效果，因此給元素新增一行，即可實現justify的兩個不足之處。 .keith { text-align: justify; } .keith:after { display: inline-block; width: 100%; content: ''; }
如果感覺最后多了空行，可以為元素設置一個高度，並且設置overflow: hidden隱藏掉即可。
justify-content
CSS3新增的flex布局下，有一個justify-content屬性，此屬性可以控制伸縮項目的水平對齊方式。其中有兩個值，可以實現兩端對齊。但是justify-content存在兼容性問題，IE10以上，FF，Chrome都支持。而所有瀏覽器都支持text-align屬性
justify-content: space-around。 伸縮項目會平均地分布在伸縮容器內，兩端保留一半的空間。 justify-content: space-between。伸縮項目會平均地分布在伸縮容器內，第一個伸縮項目在伸縮容器的左邊緣，最后一個伸縮項目在伸縮容器的右邊緣。justify-content: space-around;
justify-content: space-between