flexbox는 가능한 한 많은 브라우저를 지원하기 위해 일부 벤더 접두사가 필요합니다.

이는 단순히 속성에 벤더 접두사를 추가하는 것뿐만 아니라, 사실상 완전히 다른 속성 및 값 이름이 있습니다. 이는 flexbox 사양이 시간이 지나면서 “old(이전)”, “tweener(중간)”, “new(최신)” 버전으로 변경되었기 때문입니다.

가장 좋은 방법은 새로운 (최종) 구문으로 작성하고 CSS를 Autoprefixer를 통해 실행하여 대체값을 처리하는 것입니다.

또는 벤더 접두사에 도움을 줄 Sass @mixin 도 있습니다.

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

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

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

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}