说到两端对齐，大家并不陌生，在word、powerpoint、outlook等界面导航处，其实都有一个两端对齐(分散对齐)的按钮，平时使用的也不多，我们更习惯与左对齐、居中对齐、右对齐的方式来对齐页面的文本或模块。
响应式网页设计出现以来，更多是使用百分比布自适应布局，特别是在移动端，两端对齐的方式显得越来越重要。那么，如何使用css实现两端对齐，相信很多同学会文本对齐的text-align:justify，这是今天要讲的其中一种方式，另外还有两种更精彩的实现方式，请往下看~
下图是需要实现的demo，取了宽度分别为320px、480px、640px下的截图，也就是说再随浏览器窗口宽度的调整，按钮菜单高度不变，宽度会按比例自动适应，且左右两端对齐：
目录
方法一：使用text-align:justify
感谢join同学提供的方案，使用该方案可以做到，不过实现起来会比较复杂，而且带有hack的味道
属性是全兼容的，使用它实现两端对齐，需要注意在添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在添加[空格/换行符/制表符]才能起作用
HTML：
CSS:
测试地址：
方法二：使用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及以上，那么一切都好办~
》，写得不错，推荐给大家~
HTML：
CSS：
width:<span style="color: #0000ff;">20%;<span style="color: #ff0000;">
display:<span style="color: #0000ff;">block;<span style="color: #ff0000;">
height:<span style="color: #0000ff;">44px;<span style="color: #ff0000;">
line-height:<span style="color: #0000ff;">44px;<span style="color: #ff0000;">
text-align:<span style="color: #0000ff;">center;<span style="color: #ff0000;">
border:<span style="color: #0000ff;">1px solid #428cc8;<span style="color: #ff0000;">
color:<span style="color: #0000ff;">#666;<span style="color: #ff0000;">
font-size:<span style="color: #0000ff;">16px;<span style="color: #ff0000;">
margin-bottom:<span style="color: #0000ff;">5px;<span style="color: #ff0000;">
border-radius:<span style="color: #0000ff;">3px;<span style="color: #ff0000;">
background-color:<span style="color: #0000ff;">#fefefe;<span style="color: #ff0000;">
background-image:<span style="color: #0000ff;">-webkit-gradient(linear,#eee));<span style="color: #ff0000;">
color:<span style="color: #0000ff;">#666;<span style="color: #ff0000;">
text-decoration:<span style="color: #0000ff;">none;
}
方法三：使用column(多列布局)
column也是是css3的属性，意思是多列布局，使用column来实现两端对齐也十分简单，只需要设置模块的个数跟column的列数一致即可，不过它的自动适应方式跟使用Box-pack还有有点差别，并不是很标准，像列与列的间距暂无法定义为百分比。值得高兴的是目前支持所有高级浏览器，对IE10的支持也良好，不支持，webapp开发中，对于不需要兼容winphone7手机(IE9)的需求来说，可以充分发挥column的强大作用~
HTML：
CSS：
display:<span style="color: #0000ff;">block;<span style="color: #ff0000;">
height:<span style="color: #0000ff;">44px;<span style="color: #ff0000;">
line-height:<span style="color: #0000ff;">44px;<span style="color: #ff0000;">
text-align:<span style="color: #0000ff;">center;<span style="color: #ff0000;">
border:<span style="color: #0000ff;">1px solid #428cc8;<span style="color: #ff0000;">
color:<span style="color: #0000ff;">#666;<span style="color: #ff0000;">
font-size:<span style="color: #0000ff;">16px;<span style="color: #ff0000;">
margin-bottom:<span style="color: #0000ff;">5px;<span style="color: #ff0000;">
border-radius:<span style="color: #0000ff;">3px;<span style="color: #ff0000;">
background-color:<span style="color: #0000ff;">#fefefe;<span style="color: #ff0000;">
background-image:<span style="color: #0000ff;">-webkit-gradient(linear,#eee));<span style="color: #ff0000;">
color:<span style="color: #0000ff;">#666;<span style="color: #ff0000;">
text-decoration:<span style="color: #0000ff;">none;
}
测试地址：
移动端文本两端对齐示例
text-justify示例（补充于：20160407）
justify-content:space-between示例（补充于：20160628）
ok~
以上3种实现方式各有优缺点，具体看实际项目使用，如果大家有更好的实现方式，欢迎留言探讨~
