移動端重構實戰系列3——各類等分

單行，不考慮間距等分

以sheral的nav list爲例：

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

equal-flex的mixin定義在sandal中，代碼以下：

// flex等分
@mixin equal-flex($children: li) {
    display: flex;
    $childrenEle: li div p a span strong;
    @if index($childrenEle, $children) { // 經常使用元素
        #{$children} {
            flex: 1;
            width: 1%;
        }
    }
    @else {
        .#{$children} { // 自動加.成class
            flex: 1;
            width: 1%;
        }
    }
}

參數部分能夠是經常使用的li div p a span strong幾個元素，也能夠是class，會自動加.。

除了使用flex等分以外，咱們還能夠使用table辦法來等分，一樣sandal裏面也定義了一個equal-table的mixin，代碼以下：

// table 等分
@mixin equal-table($children: li) {
    display: table;
    table-layout: fixed;
    width: 100%;
    $childrenEle: li div p a span strong;
    @if index($childrenEle, $children) {
        #{$children} {
            display: table-cell;
        }
    }
    @else {
        .#{$children} {
            display: table-cell;
        }
    }
}

間距相等，剩餘item平分

分爲單行及多行狀況，單行直接flex就好，而多行的flex老版本兼容不是很好，因此不建議使用，直接用原始的float。

先說單行的，以sheral的line equal的第一個爲例:

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

line-equal-gap的mixin一樣定義在sandal中，代碼以下：

// line equal
@mixin line-equal-gap($gap: 10px, $lr: true, $children: li) {
    display: flex;
    @if $lr { // 左右邊緣是否有gap
        padding-left: $gap;
        padding-right: $gap;
    }
    @if $children == li { // 默認使用li元素
        #{$children} {
            flex: 1;
            width: 1%;
            &:not(:first-of-type){
                margin-left: $gap;
            }
        }
    }
    @else { // 不然使用class
        .#{$children} {
            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來實現。

這裏考慮到flex與float的無縫切換，因此flex思路一樣設置寬度的n等分，而不是單行的那種margin方法。

item相等，剩餘間距平分

單行的demo爲line equal的第二個。這裏使用的另外一個mixin: line-equal-item，其實現思路是經過flex的justify-content: space-between;進行變化使用。

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

多行的話，跟上面的card實現差很少，具體的間隙計算公式能夠參考item寬度固定，剩餘間距等分實現方案探討

本篇文章主要是對sandal中幾個等分mixin的具體實踐，簡直是分分鐘實現等分的節奏，固然這背後的mixin的定義是幾經磨難，花費了大量心血的，感興趣的能夠開始試試了（若是你要兼容的安卓機很古老，連最老版本的flex box都不支持，那就只好乾巴巴的看着了，轉頭去寫float吧）。

出處：http://www.w3cplus.com/mobile/sandal-parts-3.html