flexbox mixin

flexbox.mixin.scss

// #Flexbox

// flexboxコンテナを指定します。
@mixin display-flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

// flexboxコンテナをインラインで指定します。
@mixin display-inline-flex {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}

// flexboxアイテムの水平・垂直方向を指定します。
// ---------------------------------------
// @prop {String} $value(row) - row | row-reverse | column | column-reverse
@mixin flex-direction($value: row) {
    @if $value == row {
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;

    } @else if $value == row-reverse {
        -ms-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;

    } @else if $value == column {
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;

    } @else if $value == column-reverse {
        -ms-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
}

// flexboxアイテムを単一・複数行のどちらにするのかを指定します。
// -----------------------------------------------------
// @prop {String} $value(nowrap) - nowrap | wrap | wrap-reverse
@mixin flex-wrap($value: nowrap) {
    @if $value == nowrap {
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;

    } @else if $value == wrap {
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;

    } @else if $value == wrap-reverse {
        -ms-flex-wrap: wrap-reverse;
        -webkit-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    }
}

// 1行内での配置を指定します。
// -----------------------
// @prop {String} $value(flex-start) - flex-start | flex-end | center | space-between | space-around
@mixin justify-content($value: flex-start) {
    @if $value == flex-start {
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;

    } @else if $value == flex-end {
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;

    } @else if $value == center {
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;

    } @else if $value == space-between {
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;

    } @else if $value == space-around {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }
}

// 垂直方向の配置を指定します。
// ------------------------
// @prop {String} $value(stretch) - stretch | flex-start | flex-end | center | baseline
@mixin align-items($value: stretch) {
    @if $value == stretch {
        -ms-flex-align: stretch;
        -webkit-align-items: stretch;
        align-items: stretch;

    } @else if $value == flex-start {
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;

    } @else if $value == flex-end {
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end;

    } @else if $value == center {
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;

    } @else if $value == baseline {
        -ms-flex-align: baseline;
        -webkit-align-items: baseline;
        align-items: baseline;
    }
}

// クロス軸の垂直方向を指定します。
// ---------------------------
// @prop {String} $value(stretch) - stretch | flex-start | flex-end | center | space-between | space-around
@mixin align-content($value: stretch) {
    @if $value == stretch {
        -ms-flex-line-pack: stretch;
        -webkit-align-content: stretch;
        align-content: stretch;

    } @else if $value == flex-start {
        -ms-flex-line-pack: start;
        -webkit-align-content: flex-start;
        align-content: flex-start;

    } @else if $value == flex-end {
        -ms-flex-line-pack: end;
        -webkit-align-content: flex-end;
        align-content: flex-end;

    } @else if $value == center {
        -ms-flex-line-pack: center;
        -webkit-align-content: center;
        align-content: center;

    } @else if $value == space-between {
        -ms-flex-line-pack: justify;
        -webkit-align-content: space-between;
        align-content: space-between;

    } @else if $value == space-around {
        -ms-flex-line-pack: distribute;
        -webkit-align-content: space-around;
        align-content: space-around;
    }
}

// flexboxアイテムの順番を指定します。
// -------------------------------
// @prop {Integer} $value(0)
@mixin order($value: 0) {
    -ms-flex-order: $value;
    -webkit-order: $value;
    order: $value;
}

// フリーのポジティブなスペースがある場合にflexboxアイテムのサイズを指定します。
// --------------------------------
// @prop {Number} $value(0)
@mixin flex-grow($value: 0) {
    -ms-flex-positive: $value;
    -webkit-flex-grow: $value;
    flex-grow: $value;
}

// フリーのネガティブなスペースにflexアイテムが残りのアイテムと比較してどのくらい縮まるかを指定します。
// ----------------------------------------------------------------------------------------
// @prop {Number} $value(1)
@mixin flex-shrink($value: 1) {
    -ms-flex-negative: $value;
    -webkit-flex-shrink: $value;
    flex-shrink: $value;
}

// メインになるflexboxアイテムを指定し、それをもとに他のアイテムのサイズを決めます。
// -----------------------------------------------------------------------
// @prop {String} $value(auto) - content | <'width'>
@mixin flex-basis($value: auto) {
    -ms-flex-preferred-size: $value;
    -webkit-flex-basis: $value;
    flex-basis: $value;
}

// 垂直方向の配置を個別に指定します。
// -----------------------------
// @prop {String} $value(auto) - auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($value: auto) {
    @if $value == auto {
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;

    } @else if $value == flex-start {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;

    } @else if $value == flex-end {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;

    } @else if $value == center {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;

    } @else if $value == baseline {
    -webkit-align-self: baseline;
    -ms-flex-item-align: baseline;
    align-self: baseline;

    } @else if $value == stretch {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    }
}