移动端CSS平分等分布局延伸

结一的一篇文章《这个问题你应该很熟悉，然后懵逼，然后放弃》，看起来像是一篇探讨移动端平分布局的写法，里面的平分有些只适合三个，我试着把它拓展到四个或者多个平分的布局上，并加入一些文字在其中。例如：

flex方法

1、插入四个空标签，设置flex:1，这个答案是最多的（该方法适合用到多个布局，但代码有点臃肿，看个人喜好，有需要可以用）

<ul class="share-list">
    <li class="gap"></li>
    <li class="share-item"><span>文字居中</span></li>
    <li class="gap"></li>
    <li class="share-item"><span>前端开发博客</span></li>
    <li class="gap"></li>
    <li class="share-item"><span>http://caibaojian.com</span></li>
    <li class="gap"></li>
    <li class="share-item"><span>码农头条</span></li>
    <li class="gap"></li>
</ul>

.share-list{
    display: flex;
}
.share-item{
    width: 60px;
    height: 60px;
}
.gap{
    flex: 1;
    width: 1%;
}
.share-item{width:60px;height:60px; background:orange; }

演示：

See the Pen 平分布局2 by kujian (@kujian) on CodePen.

如何实现文字居中

根据之前写过的一篇《移动端垂直居中对齐》：http://caibaojian.com/mobile-translate.html 就可以帮我们实现以上的移动端水平居中对齐。（欢迎留言分享更多方法）
第一种：transform+相对定位（推荐使用，兼容性较好，但需要加一个宽度）

.share-item{width:60px;height:60px; background:orange; position:relative;}
.share-item span{position:absolute; left:50%; top:100%; min-width:80px; transform:translate(-50%,0); text-align:center;}

第二种：flex方法

.share-item span{ display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center; white-space:nowrap; margin-top:100%;}

以下代码中不再写文字居中的代码了，有问题还请参照上面这两个。回到正文主题。 2、第一个和第三个设置flex为1，第二个为icon的固定宽度；内嵌一层处理具体的icon宽度

<ul class="share-list">
    <li class="share-item"><div class="item-inner"></div></li>
    <li class="share-item"><div class="item-inner"></div></li>
    <li class="share-item"><div class="item-inner"></div></li>
</ul>

.share-list{
    display: flex;
}
.share-item:nth-child(1),
.share-item:nth-child(3){
    flex: 1;
    width: 1%;
}
.share-item:nth-child(2){
    width: 60px;
}
.item-inner{
    width: 60px;
    marigin-left: auto;
    margin-right: auto;
}

看了一下代码，发现不适合拓展到多个平分，不建议使用（PS：如果你发现可以改善，请告知我） 3、对
justify-content: space-between;进行变通
每个间隙的宽度 = （100% - 60px * 3）/ 4 = 25% - 45px 先外套一层wrap，设置左右的padding各位25%，再对list设置负的左右margin各位45px（相当于左右的padding减少了45px），得到第一个和最后一个间隙；中间的间隙通过
justify-content: space-between;自由分配 通过上面的计算公式，我们同样拓展到四个。每个间隙宽度=（100%-60px*4)/5 = 20% – 48px

<div class="share-list-wrap">
  <ul class="share-list">
    <li class="share-item"><span>微博分享</span></li>
    <li class="share-item"><span>微信分享</span></li>
    <li class="share-item"><span>http://caibaojian.com/</span></li>
    <li class="share-item"><span>微信好友</span></li>
  </ul>
</div>

.share-list-wrap{
    padding-left: 20%;
    padding-right: 20%;
}
.share-list{
    display: flex;
    margin-left: -48px;
    margin-right: -48px;
    justify-content: space-between;
}

演示：

See the Pen 平分布局 by kujian (@kujian) on CodePen.

今天先讲到这了，后面再续写剩下的部分，感觉我的CSS技能又有所提升了。CSS3的魅力无穷，只是你了解的不够深，你了解越多，越会发现更多的美。