移动端重构实战系列3——各种等分

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载

”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sandalsheral UI的一次全方位剖析,首发在imweb和w3cplus两大站点及“前端Talk”微信公众号,其余所有标注或没有标注来源的均为转载。“

——imweb 结一

单行,不考虑间距等分

以sheral的nav list为例:

.nav-list{
    @include equal-flex(nav-item);
}

equal-flex的mixin定义在sandal中,代码如下:

// flex等分
@mixin equal-flex($child: 'li') {
    display: flex;
    #{$child} {
      flex: 1;
      width: 1%;
    }
}

注意$child参数需要单引号包裹,因为用于选择器。

除了使用flex等分之外,我们还可以使用table办法来等分,同样sandal里面也定义了一个equal-table的mixin,代码如下:

// table 等分
@mixin equal-table($child: 'li') {
    display: table;
    table-layout: fixed;
    width: 100%;

        #{$child} {
            display: table-cell;
        }
}

间距相等,剩余item平分

分为单行及多行情况,单行直接flex就好,而多行的flex老版本兼容不是很好,所以不建议使用,直接用原始的float。

先说单行的,以sheral的line equal的第一个为例:

.equal--gap{
    @include line-equal-gap($child: line-equal-item);
}

line-equal-gap的mixin同样定义在sandal中,代码如下:

// line equal
@mixin line-equal-gap($gap: 10px, $lr: true, $child: 'li') {
    display: flex;
    @if $lr { // 左右边缘是否有gap
        padding-left: $gap;
        padding-right: $gap;
    }

  #{$child} {
    flex: 1;
    width: 1%;
    &:not(:first-of-type){
        margin-left: $gap;
    }
  }
}

通过flex来实现,如果左右边缘也有间隙,则设置左右padding,然后设置子元素的非第一个元素的margin-left

关于多行的可以参考sheral的card实现,这里以卡片2为例,关键代码如下:

$cardFlexSwitch:       false !default; // 默认使用float
$cardGap:              10px !default; // 默认间距为10px
$carLineNum:           2 !default; // 目前只支持2 或 3 等分

.card-list {
    @if $cardFlexSwitch {
        display: flex;
        flex-wrap: wrap;
    } @else {
        overflow: hidden;
    }

    .card-item {
        position: relative;
        width: 100% / $carLineNum;

        @if not $cardFlexSwitch {
            float: left;
        }

        .item-img {
            width: 100%;
        }
        .item-tt {
            line-height: 30px;
        }
    }
}
.card-list--gap{
  padding-left: $cardGap / 2;
  padding-right: $cardGap / 2;

 .card-item{
      margin-bottom: $cardGap;
      padding-left: $cardGap / 2;
      padding-right: $cardGap / 2;
  }
}

float的主要思路为设置宽度n等分,然后间距由padding或嵌套的inner元素margin来实现。

PS:这里考虑到flex与float的无缝切换,所以flex思路同样设置宽度的n等分,而不是单行的那种margin方法。

item相等,剩余间距平分

单行的demo为line equal的第二个。这里使用的另一个mixin: line-equal-item,其实现思路是通过flexjustify-content: space-between;进行变化使用。

@mixin line-equal-item($lr: true) {
    display: flex;
    justify-content: space-between;
    @if $lr {
        &::before,
        &::after {
            content: "";
        }
    }
}

多行的话,跟上面的card实现差不多,具体的间隙计算公式可以参考item宽度固定,剩余间距等分实现方案探讨

本篇文章主要是对sandal中几个等分mixin的具体实践,简直是分分钟实现等分的节奏,当然这背后的mixin的定义是几经磨难,花费了大量心血的,感兴趣的可以开始试试了(如果你要兼容的安卓机很古老,连最老版本的flex box都不支持,那就只好干巴巴的看着了,转头去写float吧)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端之路

移动端布局多种实现方式

15960
来自专栏HTML5学堂

技术新手,从何下手HTML5?

HTML与CSS的学习顺序 你曾经有没有这样的感受呢?虽然HTML5学堂中关于HTML与CSS的文章不少的,但是却不知从何下手? 这样的日子,将从今天一去不复返...

42060
来自专栏IMWeb前端团队

怎样打造一个DOM元素位置引擎 (一)

本文作者:IMWeb forsigner 原文出处:IMWeb社区 未经同意,禁止转载 碎碎念 这是一篇早就应该写的文章,但是由于过年前项目紧张,一直...

206100
来自专栏腾讯Bugly的专栏

通往全栈工程师的捷径 —— React

首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React...

376100
来自专栏腾讯社交用户体验设计

H5动画开发快车道 - AnimateCC与createjs开发实践

96130
来自专栏Android小菜鸡

LayaAir引擎学习经历

  由于公司任务安排,需要笔者先去了解一下LayaAir引擎库,以用来完成公司将要启动的大数据可视化项目,需要借助LayaAir引擎实现复杂的动画。笔者花两天时...

91720
来自专栏拂晓风起

【H5动画】谈谈canvas动画的闪烁问题

44730
来自专栏九彩拼盘的叨叨叨

我完成的百度前端技术学院任务列表

21020
来自专栏Python自动化测试

selenium中对富文本的处理

在互联网的很多产品中,富文本是经常存在的,因为在富文本中,可以插入图片,插入视频以及对字体等等可以进行调整,对于web的自动化测试人员来说,对于富文本的操作是...

32330
来自专栏PHP在线

手机网页用Bootstrap还是jQuery Mobile

很多新手纠结这个问题?两个框架都能够支持做手机网页,那么它们的区别是什么呢,适用场景是什么呢?下面我们从这几个方面比较这两个框架:解决问题、功能、适用场景。 ...

561100

扫码关注云+社区

领取腾讯云代金券