@mixin flex() {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

@mixin flex-container() {
   @include flex();
}

@mixin flex-direction($direction) {
    -webkit-box-flex-direction: $direction;
    -moz-box-flex-direction:    $direction;
    -webkit-flex-direction:     $direction;
    -ms-flex-direction:         $direction;
    flex-direction:             $direction;
}

@mixin flex-direction-column() {
    @include flex-direction(column);
}

@mixin flex-direction-row() {
    @include flex-direction(row);    
}

@mixin flex-flow($direction, $wrap) {
    @include flex-direction($direction);
    flex-wrap: $wrap;
}

@mixin flex-flow-row-wrap() {
    @include flex();
    @include flex-flow(row, wrap);
}

@mixin flex-element($grow, $shrink, $initialSize: auto) {
    -webkit-box-flex: $grow $shrink $initialSize;
    -moz-box-flex: $grow $shrink $initialSize;        
    -webkit-flex: $grow $shrink $initialSize;
    -ms-flex: $grow $shrink $initialSize;
    flex: $grow $shrink $initialSize;
}

@mixin flex-fixed() {
    @include flex-element(0, 0, auto);
}

@mixin flex-var() {
    @include flex-element(1, 1, auto);
}

@mixin flex-grow() {
    @include flex-element(1, 0, auto);
}

@mixin flex-shrink() {
    @include flex-element(0, 1, auto);
}

@mixin flex-order($index) {
    -webkit-box-ordinal-group: $index;
    -moz-box-ordinal-group:    $index;
    -webkit-order:             $index;
    -ms-flex-order:            $index;
    order:                     $index;
}

@mixin flex-vertical-content($value) {
    -webkit-box-align:   $value;
    -moz-box-align:      $value;
    -webkit-align-items: $value;
    -ms-flex-align:      $value;
    align-items:         $value;
}

@mixin flex-vertical-center() {
    @include flex-vertical-content(center);
}

@mixin flex-vertical-start() {
    @include flex-vertical-content(start);
}

@mixin flex-justify-content($value, $oldValue) {
    -webkit-box-pack:        $value;
    -moz-box-pack:           $value;
    -webkit-justify-content: $oldValue;
    -ms-flex-pack:           $value;
    justify-content:         $oldValue;
}

@mixin flex-horizontal-start() {
    @include flex-justify-content(start, flex-start);
}

@mixin flex-horizontal-center() {
    @include flex-justify-content(center, center);
}

@mixin flex-horizontal-end() {
    @include flex-justify-content(end, flex-end);
}