移动端两端对齐的多种解决方案

[fayching]

相信在移动端经常遇到这样的需求

需要把图片两端对齐，而不是整体居中，也不是平均分配宽度。

下面就整理4种移动端两端对齐的实现方式

1. display:inline-block/text-align:justify

首先pc时期经常使用的display:inline-block/text-align:justify的方式，不过我们不需要单独写个justify_fix了，使用after的伪类即可：

.main {
    text-align: justify;
    font-size: 0;
}

.main li {
    display: inline-block;
    text-align: center;
}

.main ul:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    overflow: hidden;
}

这种方式的好处是可以自动换行，但是不能控制每行显示的个数。

2.flexbox

既然是移动端，css3肯定也会有对应的解决方案，用flexbox很容易实现两端对齐的效果，不过弹性盒子这个名称几易其名，要全部兼容也不容易:

.main2 {
    height: 100px;
    width: 100%;
    display: -webkit-flex;
    display: -webkit-box;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
}

这种方法已经能解决大部分问题了。

3.flexbox + margin

有一种情形也偶尔会遇到，不仅要求图片列表两端对齐，两两之间还要加分隔线，这就需要用到下面这种方法了：

.main3 {
    display: -webkit-box;
    height: 100px;
    width: 100%;
}

.box {
    border-right: 1px solid #f43;
    -webkit-box-flex: 1;
    margin-left: 50px;
    width: 0;
    position: relative;
}

.box2 {
    -webkit-box-flex: 2;
}

.box3 {
    -webkit-box-flex: 2;
}

.box4 {
    -webkit-box-flex: 1;
    border-right: 0;
}

.box .img {
    position: absolute;
    left: 50%;
    margin-left: -50px;
}

.box1 .img {
    left: 0;
}

.box4 .img {
    left: 100%;
}

每个图片的宽度用margin实现，因为margin不会计算在flex的宽度内，所以每个子元素只要计算空白处的比例即可，很容易看出来是1:2:2:1。

4.padding+box-sizing

前几天看到km有人分享的一篇文章提到了另一种解决方案，使用padding+box-sizing解决：

.main4 {
    overflow: hidden;
    width: 100%;
}

.main4 ul {
    width: 125%;
    padding-right: 62.5px;   /* 5/4*图片宽度 */
    box-sizing: border-box;
}

.main4 ul li {
    width: 20%;
    height: 100px;
    list-style: none;
    float: left;
}

这个方案也十分巧妙，简单点理解就是先补全最后一个元素的空白，那么一个li的宽度就是（w-a）/4，ul的宽度就是5/4（w-a）,然后padding-right就设置为5/4a，ul宽度设置为5/4w，box-sizing: border-box保证ul的实际宽度是5/4w-5/4a而不是5/4w。这种方案可以实现多行的需求。

总结一下下面就几种方案列下优缺点，需要根据实际情况选择解决方案：

方案	适合场景	缺点
text-align:justify	多行需要自动换行，对每行个数不限	不能设置最小的边距
纯flexbox	一行的普通场景，代码最少	多行以及特殊情况
flexbox + margin	两个元素中间需要间隔的情况	多行
padding+box-sizing	一行或多行都能支持	小数点可能导致有1px的偏差

可以访问 http://frozenui.github.io/test/demo1.html 查看效果。