// flex布局

@use 'mixins/function' as *;
@use 'mixins/mixins' as *;

[class*=#{bem('flex')}] {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

@include b(flex) {
  // 方向
  @each $direction in (row, row-reverse, column, column-reverse) {
    &-#{$direction} {
      flex-direction: $direction;
    }
  }
  // 换行
  @each $wrap in (nowrap, wrap, wrap-reverse) {
    &-#{$wrap} {
      flex-wrap: $wrap;
    }
  }
  // 空间分配
  &-1 {
    flex: 1 1 0%;
  }
  &-auto {
    flex: 1 1 auto;
  }
  &-inital {
    flex: 0 1 auto;
  }
  &-none {
    flex: none;
  }
  // grow
  &-grow {
    flex-grow: 1;
    &-0 {
      flex-grow: 0;
    }
  }
  // shrink
  &-shrink {
    flex-shrink: 1;
    &-0 {
      flex-shrink: 0;
    }
  }

  // 组合对其方式
  @each $align in (start, end, center, baseline, stretch) {
    @each $justitfy in (start, end, center, between, around) {
      &-#{$align}-#{$justitfy} {
        @if $align == 'start' {
          align-items: flex-start;
        } @else if $align == 'end' {
          align-items: flex-end;
        } @else {
          align-items: $align;
        }
        @if $justitfy == 'between' {
          justify-content: space-between;
        } @else if $justitfy == 'around' {
          justify-content: space-around;
        } @else if $justitfy == 'start' {
          justify-content: flex-start;
        } @else if $justitfy == 'end' {
          justify-content: flex-end;
        } @else {
          justify-content: $justitfy;
        }
      }
    }
  }
  &-center {
    align-items: center;
    justify-content: center;
  }

  // justify-content
  @each $item
    in (
      (start, flex-start),
      (end, flex-end),
      (center, center),
      (between, space-between),
      (around, space-around),
      (evenly, space-evenly)
    )
  {
    &.#{'justify-' + nth($item, 1)} {
      justify-content: nth($item, 2);
    }
  }

  // justify-item
  @each $item
    in ((start, start), (end, end), (center, center), (stretch, stretch))
  {
    &.#{'justify-item-' + nth($item, 1)} {
      justify-items: nth($item, 2);
    }
  }

  // justify-self
  @each $item
    in (
      (auto, auto),
      (start, start),
      (end, end),
      (center, center),
      (stretch, stretch)
    )
  {
    &.#{'justify-self-' + nth($item, 1)} {
      justify-self: nth($item, 2);
    }
  }

  // align content
  @each $item
    in (
      (start, flex-start),
      (end, flex-end),
      (center, center),
      (between, space-between),
      (around, space-around),
      (evenly, evenly)
    )
  {
    &.#{'content-' + nth($item, 1)} {
      align-content: nth($item, 2);
    }
  }

  // align-items
  @each $item
    in (
      (start, flex-start),
      (end, flex-end),
      (center, center),
      (baseline, baseline),
      (stretch, stretch)
    )
  {
    &.#{'items-' + nth($item, 1)} {
      align-items: nth($item, 2);
    }
  }
}