结一的一篇文章《这个问题你应该很熟悉，然后懵逼，然后放弃》，看起来像是一篇探讨移动端平分布局的写法，里面的平分有些只适合三个，我试着把它拓展到四个或者多个平分的布局上，并加入一些文字在其中。例如：
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>https://qdkfweb.cn</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.
如何实现文字居中
根据之前写过的一篇《移动端垂直居中对齐》：https://qdkfweb.cn/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>https://qdkfweb.cn/</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的魅力无穷，只是你了解的不够深，你了解越多，越会发现更多的美。
