說到兩端對齊，大家並不陌生，在word、powerpoint、outlook等界面導航處，其實都有一個兩端對齊(分散對齊)的按鈕，平時使用的也不多，我們更習慣與左對齊、居中對齊、右對齊的方式來對齊頁面的文本或模塊。
響應式網頁設計出現以來，更多是使用百分比布自適應布局，特別是在移動端，兩端對齊的方式顯得越來越重要。那么，如何使用css實現兩端對齊，相信很多同學會文本對齊的text-align:justify，這是今天要講的其中一種方式，另外還有兩種更精彩的實現方式，請往下看~
下圖是需要實現的demo，取了寬度分別為320px、480px、640px下的截圖，也就是說再隨瀏覽器窗口寬度的調整，按鈕菜單高度不變，寬度會按比例自動適應，且左右兩端對齊：
目錄（更新於20161028）
方法一：使用text-align:justify
感謝join同學提供的方案，使用該方案可以做到兼容所有的瀏覽器，不過實現起來會比較復雜，而且帶有hack的味道
text-align:justify 屬性是全兼容的，使用它實現兩端對齊，需要注意在模塊之間添加[空格/換行符/制表符]才能起作用，同樣，實現文本對齊也是需要在字與字之間添加[空格/換行符/制表符]才能起作用
HTML：
<p>模塊內的元素之間為 分隔，只支持webkit和Gecko內核瀏覽器</p> <br /> <div class="demo"><a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a> </div> <br /> <p>模塊內的元素之間為換行符</p> <br /> <div class="demo"> <a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a> </div> <br /> <p>模塊內的元素之間為空格符</p> <br /> <div class="demo"> <a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a> </div> <br /> <p>模塊內的元素之間為無分隔符，justify不起作用</p> <br /> <div class="demo"><a class="link" href="#none">選項1</a><a class="link" href="#none">選項2</a><a class="link" href="#none">選項3</a><a class="link" href="#none">選項4</a></div> <br />
CSS:
*{margin:0;padding:0;} /* 說明：
1.IE中要實現塊內單行兩端對齊需要使用其私有屬性text-align-last:justify配合，text-align-last 要生效，必須先定義text-align 為justify 2.line-height:0 解決標准瀏覽器容器底部多余的空白 */ .demo{ text-align:justify; text-align-last:justify; line-height:0; height:44px; } /* 說明： 模塊使用[換行符]或[空格符]后，webkit瀏覽器中會引起最后一個模塊有多余空白，使用font-size:0可清除該空格 */ @media all and (-webkit-min-device-pixel-ratio:0){ .demo{ font-size:0; } } /* 說明： 1.text-align-last:justify 目前只有IE支持，標准瀏覽器需要使用 .demo:after 偽類模擬類似效果 2.opera瀏覽器需要添加 vertical-align:top 才能完全解決底部多余的空白 */ .demo:after{ display:inline-block; overflow:hidden; width:100%; height:0; content:''; vertical-align:top; } .demo a{ width:20%; display:inline-block; height:44px; line-height:44px; text-align:center; border:1px solid #428cc8; color:#666; font-size:16px; margin-bottom:5px; border-radius:3px; background-color:#fefefe; background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee)); color:#666; text-decoration:none; }
測試地址：
方法二：使用justify-content:space-between
box-pack是css3的新屬性，依賴於display:box(舊版彈性布局)，受box-orient影響，box-pack決定了子標簽水平對齊的方式，可選值有start | end | center | justify。使用box-pack:justify來實現兩端對齊非常簡單，代碼量也少。為了向前看齊，把display:flex(新版彈性布局)也一起寫進去~
如果是做基於webkit內核的webapp開發和winphone IE10及以上，那么一切都好辦~
關於盒模型布局的介紹，這里有篇文章《CSS box-flex屬性，然后彈性盒子模型簡介》，寫得不錯，推薦給大家~
HTML：
<div class="demo"> <a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a> </div>
CSS：
*{margin:0;padding:0;} /* 說明： display:box定義布局為盒模型后，可使用盒模型下的box-pack:justify屬性 */ .demo{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; } .demo a{ width:20%; display:block; height:44px; line-height:44px; text-align:center; border:1px solid #428cc8; color:#666; font-size:16px; margin-bottom:5px; border-radius:3px; background-color:#fefefe; background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee)); color:#666; text-decoration:none; }
測試地址：
方法三：使用column(多列布局)
column也是是css3的屬性，意思是多列布局，使用column來實現兩端對齊也十分簡單，只需要設置模塊的個數跟column的列數一致即可，不過它的自動適應方式跟使用box-pack還有有點差別，並不是很標准，像列與列的間距暫無法定義為百分比。值得高興的是目前支持所有高級瀏覽器，對IE10的支持也良好，而IE9及以下版本不支持，webapp開發中，對於不需要兼容winphone7手機(IE9)的需求來說，可以充分發揮column的強大作用~
關於column的使用方法，w3school的有相關教程：http://www.w3school.com.cn/css3/css3_multiple_columns.asp
HTML：
<div class="demo"> <a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a> </div>
CSS：
*{margin:0;padding:0;} /* 說明： 1.column-count定義了對象的列數,例子中有4個模塊，那么定義為4列 2.column-gap定義了對象中列與列的間距，間距不能設置為百分比，顯得不夠靈活 */ .demo{ -webkit-column-count:4;-moz-column-count:4;column-count:4; -webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px; } .demo a{ display:block; height:44px; line-height:44px; text-align:center; border:1px solid #428cc8; color:#666; font-size:16px; margin-bottom:5px; border-radius:3px; background-color:#fefefe; background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee)); color:#666; text-decoration:none; }
測試地址：
移動端文本兩端對齊示例
text-justify示例（補充於：20160407）
http://peunzhang.github.io/demo/justify/text_justify.html
justify-content:space-between示例（補充於：20160628）
http://peunzhang.github.io/demo/justify/space-between.html
ok~
以上3種實現方式各有優缺點，具體看實際項目使用，如果大家有更好的實現方式，歡迎留言探討~