mall-front-app/sheep/scss/style/_flex.scss

/* ==================
		弹性布局
 ==================== */
.flex {
  display: flex !important;
  &-sub {
    flex: 1 !important;
  }
  &-twice {
    flex: 2 !important;
  }
  &-treble {
    flex: 3 !important;
  }
  &-column {
    flex-direction: column !important;
  }
  &-row {
    flex-direction: row !important;
  }
  &-column-reverse {
    flex-direction: column-reverse !important;
  }
  &-row-reverse {
    flex-direction: row-reverse !important;
  }
  &-wrap {
    flex-wrap: wrap !important;
  }
  &-center {
    @include flex-center;
  }
  &-bar {
    @include flex-bar;
  }
}
.basis {
  @each $class, $value in (xs: 20%, sm: 40%, df: 50%, lg: 60%, xl: 80%) {
    &-#{$class} {
      flex-basis: $value !important;
    }
  }
}
.align {
  @each $class,
    $value
      in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline)
  {
    &-#{$class} {
      align-items: $value !important;
    }
  }
}
.self {
  @each $class,
    $value
      in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline)
  {
    &-#{$class} {
      align-self: $value !important;
    }
  }
}
.justify {
  @each $class,
    $value
      in (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around
      )
  {
    &-#{$class} {
      justify-content: $value !important;
    }
  }
}