结一

9个月前
  • 1290

    浏览
  • 0

    评论
  • 1

    收藏

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

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

”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sandalsheral UI的一次全方位剖析,首发在imwebw3cplus两大站点及“前端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 条评论