移动端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的魅力无穷,只是你了解的不够深,你了解越多,越会发现更多的美。

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:移动端CSS平分等分布局延伸 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/mobile-just-center.html)

发表评论

请登录后发表评论: