// 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
.border-box() {
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
}

// https://github.com/mastastealth/sass-flex-mixin/blob/master/_flexbox.scss
.flex() {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.inline-flex() {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.flex-direction(@value: row) {
  -webkit-flex-direction: @value;
  -moz-flex-direction: @value;
  -ms-flex-direction: @value;
  flex-direction: @value;
}

.flex-direction(row-reverse) {
  -webkit-box-direction: reverse;
  -webkit-box-orient: horizontal;
}

.flex-direction(column) {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
}

.flex-direction(column-reverse) {
  -webkit-box-direction: reverse;
  -webkit-box-orient: vertical;
}

.flex-direction(@_) {
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
}

.flex-wrap(@value: nowrap) {
  -webkit-flex-wrap: @value;
  -moz-flex-wrap: @value;
  -ms-flex-wrap: @value;
  flex-wrap: @value;
}