CSS兩端對齊

兩端對齊在導航條tab的製作中非常常用。本文將詳細介紹css兩端對齊的3種實現方式

彈性盒模型flex作為強大的彈性布局方式，可以hold住大部分的布局效果，當然也包括兩端對齊。可以使用主軸對齊justify-content的兩端對齊屬性space-between

justify-content: space-between;

如果要考慮flex三個版本的相容，則使用如下**

[注意]ie9-瀏覽器不支援

.justify-content_flex-justify

水平對齊text-align本身就有乙個屬性值是兩端對齊justify。但是，要注意的是，使用它實現兩端對齊，需要注意在元素之間新增空白符(包括空格、換行符、製表符)才起作用。由於html結構中，元素之間存在換行，所以不需要額外新增空白符

但僅僅是這樣，元素也無法實現兩端對齊效果

元素必須佔滿一行才行，如下所示。佔滿一行的元素可以實現兩端對齊，沒有佔滿的則無法實現

【text-align-last】

顯然，上面的情況都不符合要求，這時就需要使用屬性text-align-last，該屬性用來規定如何對齊文字的最後一行

於是把text-align屬性替換成text-align-last。但是，要相容ie瀏覽器需要同時設定text-align:justify

[注意]safari瀏覽器、ios、androis4.4-瀏覽器不支援

【after偽元素】

使用text-align-last可以實現兩端對齊的效果，但是相容性並不好。通過給父元素設定偽元素:after，並為偽元素設定inline-block，並設定寬度100%，相當於偽元素:after被擠到第二行。從而使原來的元素佔滿了第一行，觸發了兩端對齊的效果

這裡要注意的是，因為空白會被解析為換行，所以可以通過設定父元素的高度height，並溢位隱藏，來解決多餘的換行問題

使用多列布局column也可以實現類似的效果。column-count定義了元素的列數，例子中有3個子元素，所以定義為3列。特別要注意的是，這時需要把子元素設定為block元素才會生效

[注意]ie9-瀏覽器不支援

如果子元素之間需要使用豎線，且豎線高度與子元素高度相同時，使用column-rule可方便的實現需求