flexbox.scss

// support()
$support-webkit: true;
$support-moz: true;
$support-ms: true;
$support-o: true;

@mixin support($list) {
  $support-webkit: index($list, webkit);
  $support-moz: index($list, mozilla);
  $support-ms: index($list, ms);
  $support-o: index($list, opera);
}


// flexbox @20120716
@mixin flexbox {
  @if $support-webkit { 
    display: -webkit-box; // safari
    display: -webkit-flex; // chrome
  }
  @if $support-moz {
    display: -moz-box; // firefox
    display: -moz-flex;
  }
  @if $support-ms {
    display: -ms-flexbox; // ie
    display: -ms-flex;
  }
  @if $support-o { display: -o-flex; }
  display: flex;
}
@mixin inline-flexbox {
  @if $support-webkit { 
    display: -webkit-inline-box; // safari
    display: -webkit-inline-flex; // chrome
  }
  @if $support-moz {
    display: -moz-inline-box;
    display: -moz-inline-flex;
  }
  @if $support-ms {
    display: -ms-inline-flexbox;
    display: -ms-inline-flex;
  }
  @if $support-o { display: -o-inline-flex; }
  display: inline-flex;
}
@mixin flex($grow: 0, $shrink: 1, $basis: auto) {
  @if $support-webkit {
    -webkit-box-flex: $grow; // safari
    -webkit-flex: $grow $shrink $basis; // chrome
  }
  @if $support-moz {
    -moz-box-flex: $grow;
    -moz-flex: $grow $shrink $basis;
  }
  @if $support-ms { -ms-flex: $grow $shrink $basis; }
  @if $support-o { -o-flex: $grow $shrink $basis; }
  flex: $grow $shrink $basis;
}

// 途中